Plotly dash beginners guide

This is a guide how to get your own simple dashboard running locally. You will need a computer and an internet connection, but given that you are readig this you already have both.

Since dash is a python framework we need to install python first. If you are using Linux it will most likley be already installed (check by typing python in your terminal). Otherwise you can download python here. For Linux you might also have to install pip, you can find instructions here.

Now we have to install dash. For Linux open a terminal and run the command ‘python -m pip install dash pandas’. For Windows open CMD or Powershell and run ‘py -m pip install dash pandas’. Now we can use dash and pandas. Pandas in a library to handle datasources.

Open up the editor or IDE of your choice and a terminal session in your source folder.

First of all we need to import all needed packages:

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objects as go

from dash.dependencies import Input, Output

import math
import random

import pandas as pd

Now lets get the data from a csv file:

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/2014_apple_stock.csv')

And create the layout of our dashboard:

app = dash.Dash(__name__)

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='Hello there'),

    dcc.Interval('interval', interval=1000),

    dcc.Graph(id='scatter'),

    dcc.Graph(
        id='line',
        figure=go.Figure(
            go.Scatter(
                x = df['AAPL_x'],
                y = df['AAPL_y'],
                name='Share Prices (in USD)',
            )
        )
    ),
])

Now to make the dashboard a little bit more interesting, lets add a callback:

@app.callback(
    Output(component_id='scatter', component_property='figure'),
    [Input(component_id='interval', component_property='n_intervals'),]
)
def update_scatter(input):
    if(input is None):
        return dash.no_update

    data = go.Scatter(
        x=[random.randint(0, 100) for i in range(0, 100)],
        y=[random.randint(0, 100) for i in range(0, 100)],
        mode='markers',
    )
    layout = dict(
        title='Scatter',
        height=600,
        width=600,
    )

    return go.Figure(data=data, layout=layout)

And finally run it!

if __name__ == '__main__':
    app.run_server(debug=True)

Now switch to your open terminal and run the server:
Linux -> ‘python3 dashboard.py’
WIndows -> ‘py dashboard.py’

You will see some output with information about the server, like the adress where you can reach it.

If you enable the debug optiption, you will see debug information on the dashboard and the code will be ‘interactive’ so when you change something and save the file it will auto restart the server which is super useful. Just make sure there are no errors : )

You can find the example with a bit more happening here.
Head over here to see all the graphs or inputs available.

Now you are ready to tinker around on your own and create beautiful dashboards.

Leave a Reply