Develop and Deploy Interactive Dashboards Using Python Dash
By: Yash Mishra
Tags: Programming, Dashboard, Python, Dash, Plotly

Develop and Deploy Interactive Dashboards Using Python Dash

Photo by Artem Podrez on Pexels

Dash Introduction

Plotly has come up with a new framework called Dash which allows users to create interactive dashboards with visualizations capabilities powered by plotly express. Dash core components are used as building blocks for each application are quite exhaustive in terms of attributes. You can give a face to your Python application with it in no time.

Getting started with Dash

As an example we are building a simple dashboard to display IPL stats (runs scored, wickets taken) for each player through graphs. This will give you a basic understanding of applying Python dash framework which cloud be scaled further. You can download the IPL dataset from here.

Image by author on Heroku

You need to make sure that you have dash, plotly and pandas libraries installed in the machine. If not, you can simply do that by executing the below lines in command prompt after CD into the python installation folder or if you are working on Anaconda, just open the Anaconda prompt and execute the following lines.

pip install dash

pip install plotly

pip install pandas

Dash will be the most prominent of the 3 libraries as this will be instrumental in rendering the dashboard on the browser. Plotly will be used to create graphs. Lastly, we will use pandas for data manipulation.

Apart from this, you will also need very basic HTML and CSS which you can pick up on the go like me.

Creating the dashboard skeleton

Alright, let’s dive in then. Let’s first create our sections (HTML div) on the dashboard where we will place dash components for our app. We need one section for dash dropdown on the top and two parallel sections for displaying the dash graphs. In addition to this, we will encapsulate every section into one big section which will encompass our complete viewport.

Image by author

import dash

import dash_core_components as dcc

import dash_html_components as html

import pandas as pd

from dash.dependencies import Input, Output

import plotly.express as px app = dash.Dash(__name__)

app.title = "IPL Dashboard" #Creating a section to place our dropdown

dropdown_box = html.Div(

children = ["dropdown", dcc.Dropdown()], #dash dropdown element style = {'width': '90%', "position": "fixed", "left": "5%",

'display': 'inline-block', 'height':"5%", "top": "1%",

'z-index':'1', 'border': '2px solid green',

'text-align': 'center'}

) #Creating a section to place our graphs Graphs = html.Div(children = [

html.Div(children = ["Graph 1", dcc.Graph()], #dash graph element style = {'width': '45%', "position": "fixed", "left": "2%",

'display': 'inline-block', 'text-align': 'center',

'top': '10%', 'border': '2px solid red', 'height':'50%'}

), html.Div(children = ["Graph 2", dcc.Graph()], #dash graph element style = {'width': '45%', 'position': 'fixed', 'left': '53%',

'display': 'inline-block', 'text-align': 'center',

'top': '10%', 'border': '3px solid red', 'height':'50%'}

) ]) #creating and adding the main html div which encapsulates all elements on the viewport app.layout = html.Div(id ="main_div", children=[input_box, Graphs], style = {'background-color': '#FFFFFF', 'padding':'0',

'width':'100%', 'height':'100%', 'position': 'fixed',

'top': '0%', 'left': '0%', 'bottom': '0%', 'height':'100%',

'border': '2px solid blue'}

) if __name__ == "__main__":

app.run_server(debug=False, port = 8080)

Adding interactivity to dashboard

Now that skeleton for dashboard is ready, let’s work on creating its soul to make it interactive. For that first we need to add an id attribute to all our dash components. This will give each component a unique identifier which will be used to take input and display output on the dashboard. Apart from that we will use few more attributes which are available for dropdown like clearable, placeholder, value and options. You can look at all the attributes available for dash core components here.

To add interactivity dash offers a callback function that allows us to interact with components on the dashboard. The callback function takes input and throws output using the dash dependencies class. We can take multiple inputs from a dashboard using each dash component’s id and property attributes and similarly can render output using the same as well. We will see this in the code in detail. The limitation is — there can be only one callback function. However, we can call multiple functions inside this callback function.

Hence, we have defined two functions to render the plotly graphs. We will be calling these functions from our callback function.

So, now let’s look at how to apply the same in Python.

We have made a few changes from our skeleton version in the CSS to enhance the look and feel like removing the border, changing the background color etc.

Deploying the dashboard on the web:

There are multiple ways to deploy this dash app on the web. However, we selected Heroku for the same. For this, you need the below things.

1. Account on Git (Sign up).

2. Git bash installed on your machine.

3. Account on Heroku (Sign up)

4. Download Heroku CLI from here.

5. Optional yet helpful — Pycharm/Visual Studio installed on your computer.

Once you have set up the above resources follow the step-by-step process below.

Login to Heroku and click on - Create New App.

Give a name for your app and click - Create app.

Now, you need to create a new project in Pycharm/Visual Studio, in case you don’t have it, don’t worry. You just need to create one folder and place the files we will create in further steps in the folder.

Open the project path and add the .py file into the project folder. This file will contain all the Python code.

file into the project folder. This file will contain all the Python code. In your .py file under app = dash.Dash(__name__) add this line: server = app.server

add this line: Open terminal/command prompt, and CD into your project folder.

Pip install all libraries with specific versions your .py file needs to run.

pip install pandas==1.2.0

pip install plotly==4.8.0

pip install dash==1.12.0

pip install gunicorn==20.0.4 #Required to run app on Heroku.

Create a file in the project folder and name it .gitignore .

Image by author

Create a file in the project folder, name it Procfile and add this line to it web: gunicorn YourPythonFileNameWithoutPy:server

Image by author

Go back to the terminal/command prompt and run the following commands.

pip freeze > requirements.txt

heroku login

git init

heroku git:remote -a yourHerokuAppName

Image by author

git add .

git commit -am “initial launch”

git push heroku master

Congratulations!!! you have deployed your Dash app on the web. You can share the Heroku app URL to present the app to anyone. This offers an incredible solution to display reports or give an interface to your Python programs which users/clients can interact with.

Happy coding, have fun and stay healthy. And, in case you face any issues while applying it - I am just a comment away.