Create a time series data visualization web dashboard using Python Dash

In this tutorial, we will create a simple web dashboard with a sidebar for selection and main content page to visualize time series data using Python Dash and Boostrap Dash library. The time-series data we will visualize stock price data, but it can be extended to for any dataset. The end result will be as below.

You will need some prior background in Python, Dash, Html, CSS, Bootstrap to grasp the article completely.

Import the relevant dash libraries

import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import pandas as pd

Pip install these if you don’t have it.

Initialize the dash app

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = html.Div()

if __name__ == '__main__':
    app.run_server(port='8083')

Try to run this and check the browser if no error. Nothing will appear still.

We will create a sidebar with stock to select from and a submit button

ticker_name_dic = {'TSLA':'Tesla', 'GOOGL':'Alphabet Inc-CL A', 'MSFT':'Microsoft'}
options = []
for ticker in ticker_name_dic:
    options.append({'label': '{}-{}'.format(ticker_name_dic[ticker], ticker), 'value': ticker})

SIDEBAR_STYLE = {
    "position": "fixed",
    "top": 0,
    "left": 0,
    "bottom": 0,
    "width": "30rem",
    "padding": "2rem 1rem",
    "background-color": "#f8f9fa",
}

controls = dbc.Card(
    [
        dbc.FormGroup(
            [
                dcc.Dropdown(
                    id='my_ticker_symbol',
                    options=options,
                    value='TSLA'
                ),
                dbc.Button(
                    id='submit-button',
                    n_clicks=0,
                    children='Submit',
                    color="primary",
                    block=True
                ),
            ]
        )
    ],
)

sidebar = html.Div(
    [
        html.H2("Stocks", className="display-4"),
        html.Hr(),
        controls
    ],
    style=SIDEBAR_STYLE,
)

Add this sidebar to the main app layout

app.layout = html.Div([sidebar])

Running the app should show as below

We will add the main content which will have the close price graph for the page

CONTENT_STYLE = {
    "margin-left": "32rem",
    "margin-right": "2rem",
    "padding": "2rem 1rem",
}
content = html.Div(
    [
        html.H1('Personal Stock Price Dashboard', 
                style={'textAlign': 'center'}),
        html.Hr(),
        dbc.Row(
            [
                dbc.Col(dcc.Graph(id="my_close_price_graph"), 
                        width={"size": 8, "offset": 2}),
            ]
        )
    ],
    style=CONTENT_STYLE
)

Add the callback for the graph

@app.callback(
    Output('my_close_price_graph', 'figure'),
    [Input('submit-button', 'n_clicks')],
    [State('my_ticker_symbol', 'value')])
def update_graph(n_clicks, stock_ticker):
    graph_data = []
    close_price_query = "SELECT date, adjusted_close from stocks.eod_data where ticker = '" + str(stock_ticker) + "' order by date asc"
    df = pd.read_sql(close_price_query, con=conn)
    graph_data.append({'x': df['date'], 'y': df['adjusted_close']})
    fig = {
        'data': graph_data,
        'layout': {'title': stock_ticker + " Stock Close Price"}
    }
    return fig

I am getting the stocks closing price data from my local PostgreSQL DB, but it can be from CSV or any other database.

database = "test"
postgresql_user = "test"
postgresql_password = "****"
conn = psycopg2.connect(database=database, user=user, password=password, host="127.0.0.1", port="5432")

Add content to app layout

app.layout = html.Div([sidebar, content])

Run the app and check the output at http://127.0.0.1:8083/

The end result should be as below:

Few reference links:

Dash User Guide

https://dash-bootstrap-components.opensource.faculty.ai/