Build an Interactive, Modern Dashboard With Dash
By: Uditha Maduranga
Tags: Python, Data Visualization, Dash, React, Programming

Building a Dash App

Any Dash app is divided into two main parts:

1. Layout — Considers the static appearance of the app in the UI.

2. Callback functions — Considers the interactivity of the app.

Having a Python class for each and every HTML class is just another example of how easy Dash has made it to build web-based front ends using Python.

They maintain a set of components in the dash_core_components and the dash_html_components library but you can also build your own with JavaScript and React.js.

You can use any IDE as per your preference and you can simply name your file “ app.py ” and start using the Dash framework.

Here is a basic example of a graph that can be used in the Dash framework.



import dash_core_components as dcc

import dash_html_components as html



external_stylesheets = [‘



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



app.layout = html.Div(children=[

html.H1(children=’Weather Dashboard’),



html.Div(children=’’’

Dash: A web application framework for Python.

‘’’),



dcc.Graph(

id=’example-graph’,

figure={

‘data’: [

{‘x’: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], ‘y’: [60.56, 150.43, 76.98, 80.49, 250.80, 110.56, 80.33,

20.44, 15.32, 90.11, 150.67, 150.55], ‘type’: ‘bar’, ‘name’: ‘Expected Rain’},

{‘x’: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], ‘y’: [40.09, 128.82, 51.57, 88.53, 295.47, 47.94, 42.05,

3.41, 14.4, 113.65, 226.95, 142.51], ‘type’: ‘bar’, ‘name’: Actual Rain’},

],

‘layout’: {

‘title’: ‘Rainfall in SL in 2016’

}

}

)

])



if __name__ == ‘__main__’:

app.run_server(debug=True) import dashimport dash_core_components as dccimport dash_html_components as htmlexternal_stylesheets = [‘ https://codepen.io/chriddyp/pen/bWLwgP.css ']app = dash.Dash(__name__, external_stylesheets=external_stylesheets)app.layout = html.Div(children=[html.H1(children=’Weather Dashboard’),html.Div(children=’’’Dash: A web application framework for Python.‘’’),dcc.Graph(id=’example-graph’,figure={‘data’: [{‘x’: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], ‘y’: [60.56, 150.43, 76.98, 80.49, 250.80, 110.56, 80.33,20.44, 15.32, 90.11, 150.67, 150.55], ‘type’: ‘bar’, ‘name’: ‘Expected Rain’},{‘x’: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], ‘y’: [40.09, 128.82, 51.57, 88.53, 295.47, 47.94, 42.05,3.41, 14.4, 113.65, 226.95, 142.51], ‘type’: ‘bar’, ‘name’: Actual Rain’},],‘layout’: {‘title’: ‘Rainfall in SL in 2016’])if __name__ == ‘__main__’:app.run_server(debug=True)

Here, “Dash Core Components” were imported as dcc and form the Graph component to plot this graph.

Again, the format of the data feed is quite simple. x represents the values of the x-axis while y represents the respective values of the y-axis.

So, as you can see, we only have to give our data as two Python lists so that Dash will take care of the rest and plot an eye-catching graph for you.

Furthermore, there are plenty of customizations which can be done, such as in type , names of the axes, colors, grids, background colors, etc.

Dash includes “hot-reloading”. This feature is activated by default when you run your app with app.run_server(debug=True) . This means that Dash will automatically refresh your browser when you make a change in your code. This will make your life far easier if you’re a developer.

The dash_html_components library has a component for every HTML tag. You can use any HTML element in the format html.<element> . But there is a slight difference in the notation.

If you want to use <div> in Dash you have to use the html.Div instead of html.div . The html.H1(children='Hello Dash’) component generates a <h1>Hello Dash</h1> HTML element in your application.

The children property is special. By convention, it’s always the first attribute, which means that you can omit it: html.H1(children='Hello Dash’) is the same as html.H1('Hello Dash’) .

Also, it can contain a string, a number, a single component, or a list of components. For the dash_html_components , each component matches the associated HTML component exactly.

From the documentation, you can get further information. If you’re using HTML components, you also access properties, such as style , class , and id . All of these attributes are available in the Python classes.

The HTML elements and Dash classes are mostly the same but there are a few key differences:

The style property is a dictionary.

Properties in the style dictionary are camelCased .

. The class key is renamed as className .

. Style properties in pixel units can be supplied as just numbers without the px unit.

Not all components are pure HTML. The dash_core_components describe higher-level components that are interactive and are generated with JavaScript, HTML, and CSS through the React.js library.

For dash_core_components , there are many examples and a reference guide. See this link for a dropdown example.

For dash_core_components.Graph , the syntax of the figure matches that of the Plotly.py library and the Plotly.js library. So, any examples that you see in https://plot.ly/python/ apply and all of the available attributes can be found in the documentation.

Styling the elements

Styling the elements is achieved with CSS through the style property. An example from the documentation:

html.Div([ html.Div(‘Example Div’, style={‘color’: ‘blue’, ‘fontSize’: 14}), html.P(‘Example P’, className=’my-class’, id=’my-p-element’) ], style={‘marginBottom’: 50, ‘marginTop’: 25

These key-value pairs in the style property can be found in any CSS tutorial online, they aren’t in the Dash documentation yet. The community has been compiling some nice resources for this.

The fonts in your application will look a little bit different than what is displayed here. This application using a custom CSS stylesheet to modify the default styles of the elements.

external_stylesheets = [‘https://codepen.io/chriddyp/pen/bWLwgP.css'] app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

There are various kinds of dashboard templates which are already available in Dash. So, we can use one and customize according to our needs. These templates can be found in the Dash App Gallery.

A graph component has many arguments where most of them are optional. If you want more insight about those you can refer to the community.