How to make Dashboard Widgets using Python?-Part 3 Gauge

Introduction

In today’s article, let’s cover making a Gauge for Dashboard . Gauges are an indispensable widget when it comes to an IoT dashboard. It doesn’t take up a lot of time to create and yet they can be applied in many fields. How cool is that! 😊

They are the most habitually used high demand widget for many dashboards as well. It displays a single value to estimate progress with respect to the goal. Where in, the bar depicts the target value, and the shading is to represent the progress towards that goal.

Overview
Let’s code a basic Gauge
Let’s make it better
Customising
Conclusion

Overview

Today I am gonna help you code a basic gauge that would work perfectly well for the most common dashboards. Gauge charts, otherwise known as speedometer charts are normally used to encapsulate key business indicators.

Let’s code a basic Gauge

import plotly.graph_objects as go
import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()
fig = go.Figure(go.Indicator(
    mode = "gauge+number",
    value = 250,
    domain = {'x': [0, 1], 'y': [0, 1]},
    title = {'text': "Pressure"},
    ))
app.layout = html.Div([
    dcc.Graph(id='gauge',figure=fig),

])


app.run_server(debug=True)

Output

You can notice that the Max value keeps changing as the values change and the green bar does remain unchanged. You will obtain a constant gauge with value 250 as you have given the value as static. For you guys to observe the change clearly, I have added a callback method to update the gauge and passed some random values. I will set apart another tutorial to explain callback and update methods. Now, why not make some changes to make our gauge look better. Yeah!

Let’s make it better

We will add four additional parameters named :

Range
Delta
Steps
Threshold

Range: Defines the min and max range of the gauge.
Delta: The difference between the real-time value and the reference value.
Steps: Helps to shade inside the gauge arc, so that you can indicate different levels.
Threshold: Helps to determine boundaries that visually signal you if the value crosses a defined threshold value.

import plotly.graph_objects as go
import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()
fig = go.Figure(go.Indicator(
    mode = "gauge+number+delta",
    value = value,
    domain = {'x': [0, 1], 'y': [0, 1]},
    title = {'text': "Pressure"},
    delta = {'reference': 380 },
    gauge = {'axis': {'range': [None, 500]},
             'steps' : [
                 {'range': [0, 250], 'color': "#faff63"},
                 {'range': [250, 400], 'color': "#ff9a26"},
                 {'range': [400, 470], 'color': "#ff6224"},
                 {'range': [470, 500], 'color': "#ff2f1c"}
                 ],
             'threshold' : {'line': {'color': "#ff0015", 'width': 4}, 'thickness': 0.75, 'value': 460}}
    ))

app.layout = html.Div([
    dcc.Graph(id='gauge',figure=fig),

])


app.run_server(debug=True)

Output

By looking at the picture below you can see for yourself that this chart doesn’t need too many explanations.

Customising

OK, what’s next? Let’s add some colors so that our gauge will look popping.

import plotly.graph_objects as go
import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()
fig = go.Figure(go.Indicator(
    mode = "gauge+number+delta",
    value = value,
    domain = {'x': [0, 1], 'y': [0, 1]},
    title = {'text': "Pressure",'font': {'size': 24}},
    delta = {'reference': 380, 'increasing': {'color': "RebeccaPurple"} },
    gauge = {'axis': {'range': [None, 500], 'tickwidth': 1, 'tickcolor': "darkblue"},
            'bar': {'color': "darkblue"},
            'bgcolor': "white",
            'borderwidth': 2,
            'bordercolor': "gray",
             'steps': [
            {'range': [0, 250], 'color': 'cyan'},
            {'range': [250, 400], 'color': 'royalblue'}],
            'threshold': {
            'line': {'color': "red", 'width': 4},
            'thickness': 0.75,
            'value': 490}}))

fig.update_layout(paper_bgcolor = "lavender", font = {'color': "darkblue", 'family': "Arial"})

app.layout = html.Div([
    dcc.Graph(id='gauge',figure=fig),

])


app.run_server(debug=True)