How to make Dashboard Widgets using Python?

Deepak Radhakrishnan
()

A stunning dashboard is a vital element for an Admin panel of every IoT or analytics project. To know real-time data and for controlling as well, a dashboard always does play a significant role. How about developing remarkable Dashboard widgets by yourself?

Contents

Overview

When I started off my career I wondered, how these beautiful widgets were made? How do they work? I had so many questions on my mind. Creating something on your own will give you great satisfaction and confidence that nothing else can offer.

Now we will be creating a web-based widget using Dash. By the end of this tutorial, you will be self-sufficient to make a line chart widget for your up-coming project. Well, that sounds exciting, isn’t it?

What is Dash?

Dash is a prolific Python framework for developing web applications written on top of Flask, Plotly JS and React JS. It is an excellent platform for building Data visualisation apps like Dashboards, Scientific Displays etc.

Dash apps are rendered in the web browser. You can deploy your apps to servers in the exact same way, we deploy Flask Apps. Considering that the Dash apps are viewed in the web browser, Dash is naturally cross-platform and mobile-friendly.

Installation

pip3 install pandas
pip3 install numpy
pip3 install plotly
pip3 install dash==1.12.0

We need pandas and NumPy, as we would require pandas and NumPy later on for creating data frames and arrays.

Basic Structure

import dash
import dash_core_components as dcc
import dash_html_components as html

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(children=[
    html.H1(children='My Dash'),

    html.Div(children='''
        Dash: This is my new basic Dash.
    '''),


])

if __name__ == '__main__':
    app.run_server(debug=True)

Code Explanation

From the very first view itself, you can notice that it looks like a modified Flask Application. Yes, of course, it is built on top of the Flask Framework.

We have used a codepen stylesheet which already contains the basic css for Dash.

Import Section

We need to import dash along with its core components, for you to work with dash. Additionally, we have Html support from the dash itself. So for that purpose, I have imported dash Html components as well.

External Stylesheets

You can mention your external stylesheets in this section, just like bootstrap,w3, or any kind of custom stylesheets also.

App

As you know this is the basic thing we define even in Flask. Here we are rendering the dash along with the stylesheets we passed.

App.Layout

This is the main section of a Dash application where we define the layout and its properties.

dcc.Graph

This section defines the widget properties. id is used for the unique identification of the element we create. The Figure specifies the data and properties of the element we create.

I have specified data for testing and set the type as a line. So we will be obtaining a line Graph as output.

if name == ‘main’:app.run_server(debug=True)

Just like in the case of Flask, this section takes care of the server part to run our application in the web view. The default port will be 8050, you could also change the port to any available port number. Debug=True is used to hot reload the application, if, in case, you make any changes in the code.

Plotting a Single-Line – Line Graph

import dash
import dash_core_components as dcc
import dash_html_components as html

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(children=[
    html.H1(children='My Dash'),

    html.Div(children='''
        Dash: This is my new basic Dash.
    '''),

    dcc.Graph(
        id='new-graph',
        figure={
            'data': [
                {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'line', 'name': 'test1'},
           
            ],
            'layout': {
                'title': 'New Basic Data Visualization'
            }
        }
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)

This is a sample program to create a line graph. Which has x-axis and y-axis and type is a line, so will get a 2D line graph as output. Always remember in mind that the no.of elements in the x-axis and y-axis should be the same.

Output

Plotting Multi-Line – Line Graph

Creating a Multi-Line Graph is also very simple, all you have to do is, add one more set of data.

import dash
import dash_core_components as dcc
import dash_html_components as html

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(children=[
    html.H1(children='My Dash'),

    html.Div(children='''
        Dash: This is my new basic Dash.
    '''),

    dcc.Graph(
        id='new-graph',
        figure={
            'data': [
                {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'line', 'name': 'test1'},
                {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'line', 'name': 'test2'},
            ],
            'layout': {
                'title': 'New Basic Data Visualization'
            }
        }
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)

W have added one more set of data ie,{‘x’: [1, 2, 3], ‘y’: [2, 4, 5], ‘type’: ‘line’, ‘name’: ‘test2’}, and named it as test 2.

Output

Conclusion

We have learned how to generate and display a simple line chart using Dash. Hope you have followed the same. You can try exploring more options.

In next tutorial we will learn about generating Bar graphs. Stay tuned .

I am so excited and eager to know your feedback. Thereby I can explain it to you better at the same time improving myself. Happy Coding 😊.

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: