101 — Dashboards with Python — Pt.1

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:

The reposity of this post
My Github
For all my posts
As tool, I’m using Anaconda’s JupyterLab Notebooks
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.

https://dash.plotly.com/ — Official Documentation
https://plotly.com/python/v3/create-online-dashboard-legacy/ — Python
https://dash.plotly.com/reference — Reference
https://dash.plotly.com/dash-html-components — HTML Components
https://dash.plotly.com/dash-core-components — DCC

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

Installing

It all begins with the installation, quiet simple:

pip install plotly — upgrade
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.

Layout

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 pdapp = 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([
    dcc.Graph(
        id='life-exp-vs-gdp',
        figure=fig
    )
])if __name__ == '__main__':
    app.run_server(debug=True)

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

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")
fig.show()

3. The app

app = Dash(__name__)app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),html.Div(children='''
        Dash: A web application framework for your data.
    '''),dcc.Graph(
        id='example-graph',
        figure=fig
    )
])
app.run()

Well, that’s it, our dashboard is running in “http://127.0.0.1:8050/”.

Plotly Dashboards 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.

dash.Dash(
    name=None,
    server=True,
    assets_folder='assets',
    assets_url_path='assets',
    assets_ignore='',
    assets_external_path=None,
    eager_loading=False,
    include_assets_files=True,
    url_base_pathname=None,
    requests_pathname_prefix=None,
    routes_pathname_prefix=None,
    serve_locally=True,
    compress=None,
    meta_tags=None,
    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>',
    external_scripts=None,
    external_stylesheets=None,
    suppress_callback_exceptions=None,
    prevent_initial_callbacks=False,
    show_undo_redo=False,
    extra_hot_reload_paths=None,
    plugins=None,
    title='Dash',
    update_title='Updating...',
    long_callback_manager=None,
    **obsolete
)

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

app.layout()

No mistery, that’s all.

dash.html

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

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.

Grapht: to insert graphics
Download: to download data
Checlists: create checklists
Slider: to create a slider
Tab: to create tabs

Understanding the dashboard

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

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.