After our first steps with Dash last week, we create in this post a more complex dashboard with multiple components that we can update simultaneously.
This post is part of my journey to learn Python. You find the code for this post in my PythonFriday repository on GitHub.
Install the dash-bootstrap-components
I like working with Bootstrap and the package dash-bootstrap-components allows us to use it directly in Dash. While this is optional and you can use Dash with many other components, I suggest you give it a try. We can install the package with this command:
|
1 |
pip install dash-bootstrap-components |
All the components are well explained in the official documentation. Since it is easy to overlook, make sure that you set a stylesheet in the constructor for Dash – otherwise the user interface will not know what to do with rows and other Bootstrap-specific components:
|
1 |
app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP]) |
Extending the dashboard
In the last post we created a simple dashboard, that we now extend with more functionality. We keep the dropdown list for the days to filter the tips data set and the scatter plot.
We add a pie chart, a box plot, and a Markdown area to our dashboard. All those elements should automatically update as soon as we select a different value in the dropdown list.
To get everything working, we need a few additional imports and we set the default template for Plotly to seaborn:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import plotly.io as pio import dash_bootstrap_components as dbc from dash import Dash, html, dcc, callback, Output, Input import plotly.express as px import pandas as pd pio.templates.default = "seaborn" # Use the tips data set df = px.data.tips() app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP]) |
Creating the layout
In the layout method we start with a H1 element for the title, add a horizontal rule as a separator. Then we use the rows from Bootstrap to place the dropdown list and the Markdown area on the same row. The scatter plot gets its own row, while the pie chart and the box plot share the same row:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
app.layout = dbc.Container( [ html.H1('Tips Dashboard', style={'textAlign':'center'}), html.Hr(), dbc.Row( [ dbc.Col(dcc.Dropdown(df.day.unique(), 'Sun', id='dropdown-selection'), width=4), dbc.Col(dcc.Markdown(id='total-label'), width=4), ], justify='center', ), dbc.Row( [ dcc.Graph(id='scatter-graph'), ] ), dbc.Row( [ dbc.Col(dcc.Graph(id="pie-graph"), width=4), dbc.Col(dcc.Graph(id="box-graph"), width=8), ], align="center", ), ], fluid=False ) |
Gluing everything together
The update logic and the definition of the plots is handled in the method update_graphs(). We use the callback to map one input on an output for each of our 4 components. We need to specify the Id of the element and the property name we want to put the return value into.
The method returns multiple values as a tuple and Dash puts them into the different outputs of the callback:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
@callback( [ Output('scatter-graph', 'figure'), Output('pie-graph', 'figure'), Output('box-graph', 'figure'), Output('total-label', 'children') ], Input('dropdown-selection', 'value') ) def update_graphs(value): dff = df[df.day==value] scatt = px.scatter(dff, x='total_bill', y='tip', color='smoker') pie = px.pie(dff, values='tip', names='smoker') box = px.box(dff, x="time", y="total_bill", color="smoker") text = f'** #{dff.shape[0]} rows **' return scatt, pie, box, text |
At the end of our Python script, we add the well-known lines to start the application:
|
1 2 |
if __name__ == '__main__': app.run(debug=True) |
The result
If we put all the code together and run our application, we get a dashboard that looks like this:
For all the plots we can use the interactive features of Plotly and zoom to the interesting parts.
Next
We created an interactive dashboard with multiple components that are updated in one go. I hope this shows you the possibilities of Dash and how we can create complex dashboards to meet our requirements.
Next week we add Dash to an existing Flask application and fight through the obstacles we find on the way.