Gauge

Visualize single-value data in Ubidots in the form of Gauge charts

The Gauge widget provides a clear and intuitive way to visualize single-value metrics, making it ideal for representing KPIs, performance scores, percentages, or real-time sensor readings. The widget allows users to quickly assess the current state of a variable against defined ranges.

For a preliminary understanding of the widget, please visit this article, which covers the basics of setting up a Gauge widget.

In this section, only advanced features of the Gauge widget will be covered.

ECharts configuration

This options is only available for Enterprise users

ECharts is a powerful open-source visualization library designed to create interactive and customizable charts. ECharts provides extensive customization options, allowing you to tailor the appearance and behavior of Gauges to fit specific requirements.

In this case, the Gauge widget sits on top of ECharts library, given users the ability to customize the widget by accessing all features provided by the library through the option "ECharts configuration" found in the widget's APPEARANCE tab:

After clicking the option, a big drawer appears from the left exposing the ECharts options JSON that not only maps all fields available from the UI, but also provides an editing environment where users can take full advantage of the Line and Bar series type.

All fields expose through the UI are mapped bidirectionally. This means that if you make a change from the UI, it will be reflected in the EChart options JSON, and viceversa.

Examples

The below examples use the ECharts configuration option to get the results shown. Without this advanced option, getting the same visualization isn't possible by only using the UI available fields.

Full circle Gauge

JSON Example

{
    "media": [
        {
            "query": {
                "maxHeight": 165
            },
            "option": {
                "series": [
                    {
                        "center": [
                            "50%",
                            "50%"
                        ],
                        "radius": "80%",
                        "axisLine": {
                            "lineStyle": {
                                "width": 24
                            }
                        }
                    },
                    {
                        "center": [
                            "50%",
                            "50%"
                        ],
                        "radius": "80%",
                        "progress": {
                            "width": 12
                        },
                        "detail": {
                            "rich": {
                                "unit": {
                                    "fontSize": 8,
                                    "lineHeight": 10
                                },
                                "value": {
                                    "fontSize": 10,
                                    "lineHeight": 12
                                }
                            },
                            "offsetCenter": [
                                0,
                                "6%"
                            ],
                            "width": 62,
                            "height": 20,
                            "borderRadius": 12
                        }
                    }
                ]
            }
        },
        {
            "query": {
                "maxAspectRatio": 1
            },
            "option": {
                "series": [
                    {},
                    {
                        "detail": {
                            "rich": {
                                "unit": {
                                    "fontSize": 10
                                },
                                "value": {
                                    "fontSize": 14
                                }
                            },
                            "offsetCenter": [
                                0,
                                "8%"
                            ]
                        }
                    }
                ]
            }
        },
        {
            "query": {
                "maxAspectRatio": 1.12,
                "minAspectRatio": 1
            },
            "option": {
                "series": [
                    {},
                    {
                        "detail": {
                            "rich": {
                                "unit": {
                                    "fontSize": 11
                                },
                                "value": {
                                    "fontSize": 18
                                }
                            },
                            "offsetCenter": [
                                0,
                                "8%"
                            ]
                        }
                    }
                ]
            }
        }
    ],
    "series": [
        {
            "type": "gauge",
            "min": 0,
            "max": 100,
            "startAngle": 90,
            "endAngle": -270,
            "center": [
                "50%",
                "50%"
            ],
            "radius": "86%",
            "pointer": {
                "show": false
            },
            "progress": {
                "show": false
            },
            "axisLine": {
                "lineStyle": {
                    "width": 32,
                    "color": [
                        [
                            1,
                            "#E9EDF2"
                        ]
                    ]
                }
            },
            "axisTick": {
                "show": false
            },
            "splitLine": {
                "show": false
            },
            "axisLabel": {
                "show": false
            },
            "title": {
                "show": false
            },
            "detail": {
                "show": false
            }
        },
        {
            "type": "gauge",
            "min": 0,
            "max": 100,
            "startAngle": 90,
            "endAngle": -270,
            "center": [
                "50%",
                "50%"
            ],
            "radius": "86%",
            "pointer": {
                "show": false
            },
            "axisLine": {
                "lineStyle": {
                    "width": 0
                }
            },
            "progress": {
                "clip": false,
                "show": true,
                "width": 16,
                "roundCap": true,
                "itemStyle": {
                    "borderColor": "#464646",
                    "borderWidth": 1
                }
            },
            "axisTick": {
                "show": false
            },
            "splitLine": {
                "show": false
            },
            "axisLabel": {
                "show": false
            },
            "title": {
                "show": false
            },
            "detail": {
                "rich": {
                    "unit": {
                        "padding": [
                            0,
                            0,
                            0,
                            2
                        ],
                        "fontSize": "10%",
                        "fontWeight": 400,
                        "lineHeight": 22
                    },
                    "value": {
                        "fontSize": "20%",
                        "fontWeight": "bold",
                        "lineHeight": 22
                    }
                },
                "formatter": "{value|{value}}{unit| {unit}}",
                "offsetCenter": [
                    0,
                    "10%"
                ],
                "valueAnimation": true,
                "width": 70,
                "height": 24,
                "borderWidth": 1,
                "borderRadius": 14,
                "color": "inherit",
                "borderColor": "inherit"
            }
        }
    ]
}

Speed meter gauge

JSON Example

{
    "media": [
        {
            "query": {
                "maxHeight": 180
            },
            "option": {
                "series": [
                    {
                        "detail": {
                            "rich": {
                                "unitFormatter": {
                                    "padding": [
                                        0,
                                        0,
                                        0,
                                        4
                                    ],
                                    "fontSize": 12,
                                    "lineHeight": 20
                                },
                                "valueFormatter": {
                                    "fontSize": 18,
                                    "fontWeight": "bold",
                                    "lineHeight": 20
                                }
                            },
                            "show": true,
                            "formatter": "{valueFormatter|{value}}{unitFormatter| {unit}}",
                            "offsetCenter": [
                                0,
                                "10%"
                            ],
                            "valueAnimation": true
                        },
                        "pointer": {
                            "show": false
                        },
                        "axisLine": {
                            "lineStyle": {
                                "width": 14
                            }
                        },
                        "axisTick": {
                            "show": false
                        },
                        "axisLabel": {
                            "show": false
                        },
                        "splitLine": {
                            "show": false
                        }
                    }
                ]
            }
        },
        {
            "query": {
                "maxHeight": 260
            },
            "option": {
                "series": [
                    {
                        "detail": {
                            "rich": {
                                "unitFormatter": {
                                    "padding": [
                                        0,
                                        0,
                                        0,
                                        4
                                    ],
                                    "fontSize": 14,
                                    "lineHeight": 24
                                },
                                "valueFormatter": {
                                    "fontSize": 22,
                                    "fontWeight": "bold",
                                    "lineHeight": 24
                                }
                            },
                            "show": true,
                            "color": "inherit",
                            "formatter": "{valueFormatter|{value}}{unitFormatter| {unit}}",
                            "offsetCenter": [
                                0,
                                "15%"
                            ],
                            "valueAnimation": true
                        },
                        "pointer": {
                            "show": true,
                            "itemStyle": {
                                "color": "auto"
                            }
                        },
                        "axisLine": {
                            "lineStyle": {
                                "width": 22
                            }
                        },
                        "axisTick": {
                            "show": true,
                            "length": 6,
                            "distance": -22,
                            "lineStyle": {
                                "color": "#fff",
                                "width": 2
                            },
                            "splitNumber": 1
                        },
                        "axisLabel": {
                            "show": false
                        },
                        "splitLine": {
                            "show": true,
                            "length": 18,
                            "distance": -22,
                            "lineStyle": {
                                "color": "#fff",
                                "width": 3
                            }
                        }
                    }
                ]
            }
        },
        {
            "query": {
                "maxAspectRatio": 1.05
            },
            "option": {
                "series": [
                    {
                        "detail": {
                            "rich": {
                                "unitFormatter": {
                                    "fontSize": 16,
                                    "lineHeight": 26
                                },
                                "valueFormatter": {
                                    "fontSize": 24,
                                    "lineHeight": 26
                                }
                            },
                            "offsetCenter": [
                                0,
                                "18%"
                            ]
                        },
                        "axisLabel": {
                            "show": true,
                            "color": "inherit",
                            "distance": 26,
                            "fontSize": 14
                        }
                    }
                ]
            }
        }
    ],
    "series": [
        {
            "max": 10,
            "min": 0,
            "type": "gauge",
            "detail": {
                "rich": {
                    "unitFormatter": {
                        "padding": [
                            0,
                            0,
                            0,
                            6
                        ],
                        "fontSize": 18,
                        "lineHeight": 30
                    },
                    "valueFormatter": {
                        "fontSize": 28,
                        "fontWeight": "bold",
                        "lineHeight": 30
                    }
                },
                "show": true,
                "color": "inherit",
                "formatter": "{valueFormatter|{value}}{unitFormatter| {unit}}",
                "offsetCenter": [
                    0,
                    "20%"
                ],
                "valueAnimation": true
            },
            "pointer": {
                "show": true,
                "itemStyle": {
                    "color": "auto"
                }
            },
            "axisLine": {
                "lineStyle": {
                    "color": [
                        [
                            0.3,
                            "#67e0e3"
                        ],
                        [
                            0.7,
                            "#37a2da"
                        ],
                        [
                            1,
                            "#fd666d"
                        ]
                    ],
                    "width": 30
                }
            },
            "axisTick": {
                "show": true,
                "length": 8,
                "distance": -30,
                "lineStyle": {
                    "color": "#fff",
                    "width": 2
                },
                "splitNumber": 1
            },
            "axisLabel": {
                "show": true,
                "color": "inherit",
                "distance": 40,
                "fontSize": 20
            },
            "splitLine": {
                "show": true,
                "length": 30,
                "distance": -30,
                "lineStyle": {
                    "color": "#fff",
                    "width": 4
                }
            }
        }
    ]
}

Pressure gauge

JSON Example

{
    "media": [
        {
            "query": {
                "maxHeight": 165
            },
            "option": {
                "series": [
                    {
                        "center": [
                            "50%",
                            "66%"
                        ],
                        "detail": {
                            "rich": {
                                "u": {
                                    "padding": [
                                        0,
                                        0,
                                        0,
                                        2
                                    ],
                                    "fontSize": 9,
                                    "lineHeight": 16
                                },
                                "v": {
                                    "fontSize": 14,
                                    "fontWeight": "bold",
                                    "lineHeight": 16
                                }
                            },
                            "formatter": "{v|{value}}{u| {unit}}",
                            "borderWidth": 0,
                            "offsetCenter": [
                                0,
                                "8%"
                            ]
                        },
                        "radius": "82%",
                        "axisLine": {
                            "lineStyle": {
                                "width": 14
                            }
                        },
                        "axisTick": {
                            "length": 4,
                            "distance": -22,
                            "lineStyle": {
                                "color": "#999999",
                                "width": 1
                            }
                        },
                        "axisLabel": {
                            "color": "#999999",
                            "distance": -18,
                            "fontSize": 8
                        },
                        "splitLine": {
                            "length": 8,
                            "distance": -26,
                            "lineStyle": {
                                "color": "#999999",
                                "width": 2
                            }
                        }
                    }
                ]
            }
        }
    ],
    "series": [
        {
            "max": 2000,
            "min": 0,
            "type": "gauge",
            "title": {
                "show": false
            },
            "anchor": {
                "show": false
            },
            "center": [
                "50%",
                "70%"
            ],
            "detail": {
                "rich": {
                    "u": {
                        "padding": [
                            0,
                            0,
                            0,
                            6
                        ],
                        "fontSize": 14,
                        "lineHeight": 32
                    },
                    "v": {
                        "fontSize": 30,
                        "fontWeight": "bolder",
                        "lineHeight": 32
                    }
                },
                "color": "inherit",
                "formatter": "{v|{value}}{u| {unit}}",
                "borderWidth": 0,
                "offsetCenter": [
                    0,
                    "-8%"
                ],
                "valueAnimation": true
            },
            "radius": "84%",
            "pointer": {
                "show": false
            },
            "axisLine": {
                "lineStyle": {
                    "color": [
                        [
                            1,
                            "#E9EDF2"
                        ]
                    ],
                    "width": 22
                }
            },
            "axisTick": {
                "length": 6,
                "distance": -30,
                "lineStyle": {
                    "color": "#999999",
                    "width": 2
                },
                "splitNumber": 5
            },
            "endAngle": -20,
            "progress": {
                "show": true,
                "width": 22,
                "itemStyle": {
                    "color": "#FFAB91"
                }
            },
            "axisLabel": {
                "color": "#999999",
                "distance": -24,
                "fontSize": 14
            },
            "splitLine": {
                "length": 10,
                "distance": -34,
                "lineStyle": {
                    "color": "#999999",
                    "width": 3
                }
            },
            "startAngle": 200,
            "splitNumber": 10
        },
        {
            "max": 2000,
            "min": 0,
            "type": "gauge",
            "center": [
                "50%",
                "70%"
            ],
            "detail": {
                "show": false
            },
            "radius": "84%",
            "pointer": {
                "show": false
            },
            "axisLine": {
                "show": false
            },
            "axisTick": {
                "show": false
            },
            "endAngle": -20,
            "progress": {
                "show": true,
                "width": 6,
                "itemStyle": {
                    "color": "#FD7347"
                }
            },
            "axisLabel": {
                "show": false
            },
            "splitLine": {
                "show": false
            },
            "startAngle": 200
        }
    ]
}

Humidity percentage

JSON Example

{
    "series": [
        {
            "type": "gauge",
            "min": 0,
            "max": 100,
            "startAngle": 180,
            "endAngle": 0,
            "splitNumber": 8,
            "center": [
                "50%",
                "75%"
            ],
            "radius": "90%",
            "axisLine": {
                "lineStyle": {
                    "width": 6,
                    "color": [
                        [
                            0.3,
                            "#FF6E76"
                        ],
                        [
                            0.6,
                            "#FDDD60"
                        ],
                        [
                            0.8,
                            "#58D9F9"
                        ],
                        [
                            1,
                            "#7CFFB2"
                        ]
                    ]
                }
            },
            "pointer": {
                "icon": "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
                "length": "12%",
                "width": 20,
                "offsetCenter": [
                    0,
                    "-60%"
                ],
                "itemStyle": {
                    "color": "auto"
                }
            },
            "axisTick": {
                "length": 12,
                "lineStyle": {
                    "color": "auto",
                    "width": 2
                }
            },
            "splitLine": {
                "length": 20,
                "lineStyle": {
                    "color": "auto",
                    "width": 5
                }
            },
            "axisLabel": {
                "color": "auto",
                "fontSize": 14,
                "distance": -60,
                "rotate": "tangential",
                "formatter": "{value}"
            },
            "title": {
                "show": false
            },
            "detail": {
                "fontSize": 28,
                "valueAnimation": true,
                "offsetCenter": [
                    0,
                    "-35%"
                ],
                "color": "inherit",
                "rich": {
                    "v": {
                        "fontSize": 30,
                        "fontWeight": "bold",
                        "lineHeight": 36
                    },
                    "u": {
                        "fontSize": 14,
                        "lineHeight": 36,
                        "padding": [
                            0,
                            0,
                            0,
                            6
                        ]
                    }
                },
                "formatter": "{v|{value}}{u| {unit}}"
            }
        }
    ]
}