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

Deepak Radhakrishnan
()

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.

Contents

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 :

  1. Range
  2. Delta
  3. Steps
  4. 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)

Output

Conclusion

That’s all! Curious about how it works? Do try it and see for yourself. If you need more support, be sure to get in touch with me.

Thank you for visiting our Tech Rover blog! Stay tuned for more. Happy coding and building. 😊

How useful was this post?

Click on a starts to rate it!

Average rating / 5. Vote count:

No votes so far! Be the first to rate this post.

As you found this post useful...

Follow me on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

%d bloggers like this: