Building a Dashboard App using Plotly’s Dash: A Complete Guide from Beginner to Pro
Complete guide to building an interactive dashboard App with Dash and deploy it to Heroku, Part 1: Creating a Basic dashboard
Dashboards can make data visualization more interactive, communicative, simple, and user friendly. Assume a situation where you need to build an interactive dashboard but you are only comfortable with python. In this situation Dash comes to rescue you.
Dash is a Python framework for building analytical web applications. No JavaScript required. Built on top of Plotly.js, React and Flask, Dash ties modern UI elements like dropdowns, sliders, data tables, and graphs directly to your analytical Python code.
I will cover whole tutorial in 2 parts. First part will cover creating a basic dashboard and then adding more options to it. In Second part, I will write more on dash components, user authentication, and deploying app to Heroku.
We will build above dashboard in this article.
See a real life dashboard example created with Dash to track Covid19 cases in India.
Initial set-up
First create a new folder (Example: dashboard_demo) with mkdir dashboard_demo command and change working directory with cd dashboard_demo. I am assuming that you have already installed anaconda and it is working fine. Now create a conda virtual environment with conda create --name dashboard command and active it with source active dashboard or conda activate dashboard commands.
Install dependencies via pip and save them to “requirements.txt” file.
pip install Flask
pip install dash
pip install plotly
pip install dash_html_components # dash html components
pip install dash_core_components # dash core components
pip install PriceIndices # will used for this tutorial for data
pip install lxml # Needed for PriceIndices package
pip install dash-table # data table components
pip install dash-auth # for user authentication
pip install gunicorn # needed for deployment Save above python packages to “requirements.txt” with pip freeze --> requirements.txt command. “requirements.txt” look like below.
dash==1.6.1
dash-core-components==1.5.1
dash-html-components==1.0.2
dash-auth==1.3.2
dash-table==4.5.1
Flask==1.0.2
gunicorn==19.9.0
numpy==1.15.4
pandas==0.23.4
plotly==4.2.1
PriceIndices==1.1.1
lxml==4.4.1Dashboard App
In this section, I will cover basic introduction of dash components and how to use them to make a dashboard.
1. Introduction
I will give a brief summary of dash components before we build a dashboard app. Dash html components and dash core components are used to build interactive dashboards.
Dash html components works as html tags. It convert python code to html code. See example below:
Dash core components have different components to build interactive dashboards.
I. Graphs: It is used to make graphs.
II. Tabs: A component to make tabs
III. Dropdown: It creates a dropdown to select items.
IV. Sliders: It a value range slider.
V. DatePickers: Date pickers are used to select date or date range.
V. Table: This component is used to display tables.
VI. Markdown: It works as markdown.
VII. Checklist: It offers checklist options.
VIII. RadioItems: RadiosItems are used to make radio buttons.
IX. Location: It represents the location bar in your web browser.
X. Store: It is used to store data in user’s browser.
I recommend to read official documentation to get started with Dash.
We will see uses of few of above components in this tutorial.
2. First Simple App
Now create 2 files ( app.py and index.py )in dashboard_demo directory with touch command. touch app.py & touch index.py
“app.py” will be same for the most of dashboard apps build using dash. In app file we create a dash app, server and define app’s overall style with a css file. external_stylesheets is a css file which is used to define app’s overall style.
“index.py” will have app’s html and core components. There are two main parts of dash app which will be defined in index file, are app layout and callbacks. App layout describes what the application looks like and callbacks describe the interactivity of the application.
Let’s write a simple “index.py” which make a line graph.
Run index.py with $ python3 index.py command. You should be able see dashboard app at http://127.0.0.1:8050/ . Dashboard will look like below picture.
3. Add callback and improve graph layout
Above dashboard looks very simple. Lets’s introduce callbacks and change graph layout.
How does callbacks work?
The “inputs” and “outputs” of our application interface are described declaratively through the
app.callbackdecorator which are simply the properties of a particular component. Whenever an input property changes, the function that the callback decorator wraps will get called automatically and output will change in app layout.
We can define style, color, text format, graph background etc in graph layout. See code example below which has callback and updated graph layout.
If we compare “index.py example-1” and “index.py example-2”, We could see that there is an app.callback added and graph layout also got few now items in “index.py example-2”. Refresh the app page to see changes.
Note: We should use callbacks only when we want to change output/s based on certain input/s. In above example
app.callbackis not needed. I just used it to demonstrate its use.
4. Add DateRangePicker and use real data for graph
In this part we will add a DateRangePicker to layout and also use real data for graph.
I will use Bitcoin price data to make a price vs time line chart for selected date range. Bitcoin price data available on CoinMarketCap . I will use PriceIndices python library to get price data from CoinMarketCap.
DateRangePicker’s components are explained below.
min_date_allowed: Min date allowed to select
max_date_allowed: Maximum date allowed to select
initial_visible_month: Initial visible month when click to select date
start_date: Start date of date range picker
end_date : End date of date range picker
number_of_months_shown: Number of months to be shown to select dates
month_format: Format to display month and year
display_format: Date display format
I will also add DateRangePicker’s start date and end date to app.callback so graph can be displayed for selected date range.
Above app has a DateRangePicker. Graph is displayed between selected date range.
5. Add Data Table and Markdown
In this section, we will add a data table and markdown to app. First write a function to get data table. Data table can be created using dash-table library. dash-table renders a html table.
df = history.get_price('bitcoin', '20130428', '20200510')
def get_data_table():
data_table = dash_table.DataTable(
id='datatable-data',
data=df.to_dict('records'),
columns=[{'id': c, 'name': c} for c in df.columns],
style_table={'overflowY': 'scroll'},
fixed_rows={'headers': True, 'data': 10},
style_cell={'width': '100px'},
style_header={
'backgroundColor': 'rgb(230, 230, 230)',
'fontWeight': 'bold'
}
)
return data_tableNow add 2 html components to app.layout for data table and markdown. Dash markdown works same as any other markdown. I have used markdown to right copyrights at bottom of the app page.
html.Div(children=[html.H1(children="Data Table", # html for table
style={
'textAlign': 'center',
"background": "yellow"}),
get_data_table()]),
html.Div(children=[dcc.Markdown( # markdown
" © 2019 [DCAICHARA](https://github.com/dc-aichara) All Rights Reserved.")], style={
'textAlign': 'center',
"background": "yellow"})Let’s see changes in app.
6. Add Dropdown
Dropdown is used to select one or more items from given options. We have used only bitcoin price data to plot graph till now. Let’s create a dropdown which has option to select different cryptocurrencies.
I will add Dropdown next to DateRangePicker. Here we need to add a new app.callback for data table which will take input from Dropdown and extract data for given input coin. We will also add Dropdown input to graph callback to plot graph for selected coin. Flowchart below explains how do callbacks work.
See changes in "index.py” after adding Dropdown and updating callbacks.
Our Dash app now have a DateRangePicker to select date range, Dropdown to select cryptocurrency, Graph, and Data Table.
This is the end of first part. I will cover Tabs, data sharing between callbacks, multi outputs callback, user authentication, Login & Logout Button, and deploying app to Heroku in part 2.
- See beautiful collection of Dash resources on awesome-dash page.
Thank you for reading! If you have any query, please reach out to me on LinkedIn or Twitter.
Reference:
