101 — Dashboards with Python — Pt.1

Igor Comune
5 min readJun 5, 2022


I have been away from Medium for a long time. The main reason is study and a new job as BI (Business Intelligence) Analyst. As a BI analyst, I have been facing a lot of challenges, learning everyday more and more. There are a lot of things that I’d to share, but for now, I will focus on Dashboards with Python.

The Objective

Learn and share knowledge.

If you are here expecting a PhD in dashboards, maybe there are other better sources for you.

This post will describe not only information about Python Dashboards, but also document my learning process, and maybe, maybe… my learning process will help you. And if it does… great, this is 50% of the objetive of this blog.

Other info:

  1. The reposity of this post
  2. My Github
  3. For all my posts
  4. As tool, I’m using Anaconda’s JupyterLab Notebooks
  5. My LinkedIn

Tip: If you are using JupyterLab, try to use the “Show Context Menu” It’ll show you details about each function you click on.

Why dashboard with Python?

Well, one of the challenges I faced recently is:
- Power BI can be costly when you are not a single user or when you can pay almost US$ 4.995,00 per month.

Each Power BI user costs US$ 9.99. So, you have to pay this 10 bucks for the dashboard’s creator and another bucks for each additional user. The plan with limitless users only worth it when there are more than 500 users, it’s an enourmes cost.

There are other open source solutions… and of course, the paid ones, like Power BI and Qlik Sense. Most of them charge its fees by user, the more the number of users, the higher the costs.

I also know that Google Data Studio is for free, easy to connect with Big Query… but, I think it has a lot to improve.

So, what made me think about Python?

Well, at my job, all the ETL (Extract, Transform and Load) process is made with Python, my main programming language is Python… I thought… well, there must be a solution in Python for matter… and, surprise, it has!

Plotly Dashboards

I was already kind of experienced with Plotly, maybe even more experienced with it than with Seaborn or MatPlotLib.

  1. https://dash.plotly.com/ Official Documentation
  2. https://plotly.com/python/v3/create-online-dashboard-legacy/ Python
  3. https://dash.plotly.com/reference Reference
  4. https://dash.plotly.com/dash-html-componentsHTML Components
  5. https://dash.plotly.com/dash-core-components DCC

“Dash is an open source library released under the permissive MIT license.” — Plotly


It all begins with the installation, quiet simple:

  1. pip install plotly — upgrade
  2. pip install jupyter-dash or conda install -c conda-forge -c plotly jupyter-dash (if you are using Jupyter) if you not, pip install dash.


The following code is given in the Layout part of the documentation:

from dash import Dash, dcc, html
import plotly.express as px
import pandas as pd
app = Dash(__name__)df = pd.read_csv('https://gist.githubusercontent.com/chriddyp/5d1ea79569ed194d432e56108a04d188/raw/a9f9e8076b837d541398e999dcbac2b2826a81f8/gdp-life-exp-2007.csv')fig = px.scatter(df, x="gdp per capita", y="life expectancy",
size="population", color="continent", hover_name="country",
log_x=True, size_max=60)
app.layout = html.Div([
if __name__ == '__main__':

I think that it is too complex, let’s break it down!
This code can be broken is three pieces:

  1. The libraries
import plotly
import pandas as pd
from dash import Dash, html, dcc
import plotly.express as px
import pandas as pd

2. The Creation of the dataframe and the graph (executing this code, you’ll be able to see a graph)

df = pd.DataFrame({
"Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
"Amount": [4, 1, 2, 2, 4, 5],
"City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")

3. The app

app = Dash(__name__)app.layout = html.Div(children=[
html.H1(children='Hello Dash'),
Dash: A web application framework for your data.

Well, that’s it, our dashboard is running in “”.

Plotly Dashboards Structure

Figure 1 — Plotly Structure.

Some questions may have arisen. What is app, what is layout, what is html, div, graph, dcc… ??? And that’s is only the basics.

To understand it, we should get back to Intro page, where is quoted “Dash is React for Python.” In Wikipedia, is said that “ React is a free and open-source front-end JavaScript library for building user interfaces based on UI components.

If you enabled the “Show Context Menu”, it will help a lot to visualize all the settings within the function.

If are minimally experienced with HTML you know part of this, html, div, DIV, H1.

So what is “app = Dash(__name__)”?

dash.Dash: According to the reference “Dash is a framework for building analytical web applications.” — (Source). The app is a Flask server, basically speaking.

index_string='<!DOCTYPE html>\n<html>\n <head>\n {%metas%}\n <title>{%title%}</title>\n {%favicon%}\n {%css%}\n </head>\n <body>\n {%app_entry%}\n <footer>\n {%config%}\n {%scripts%}\n {%renderer%}\n </footer>\n </body>\n</html>',

As default, “server=True” means that Flask will create a new server.


No mistery, that’s all.


A layout is made of HTML tags, like div’s. Here is a example from the reference:

Figure 2 — Source: https://dash.plotly.com/dash-html-components

dash.DCC — Dash Core Components

Assuming the these are the core components, it will be required a little bit more of our attention. There are a lot of options, I won’t describe each one of them, but only the most import ones.

  1. Grapht: to insert graphics
  2. Download: to download data
  3. Checlists: create checklists
  4. Slider: to create a slider
  5. Tab: to create tabs

Understanding the dashboard

If you executed the code and opened the local link, this tab should open.

Figure 3 — The Example Dashboard

A dashboard in dash library is made of HTML Tags, that organizes a web-app page for the dashboard. You can freely organize this web-app as you want using the dash.html functions.

To plot a graph inside the web-app you need to use de dash.dcc functions or Dashboard Core Components.

The Pt2

In the next post we’ll focus create a dashboard in Python using dash using real data.


Igor Comune.



Igor Comune

An "under construction" Data Scientist with a love for numbers and analysis!