Analytics Vidhya
Published in

Analytics Vidhya

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:

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

--

--

--

Analytics Vidhya is a community of Analytics and Data Science professionals. We are building the next-gen data science ecosystem https://www.analyticsvidhya.com

Recommended from Medium

Hypothesis Testing

Hopsworks Feature Store for AWS SageMaker

So You Want to Work with Data?

A brief introduction to Social Network Analysis

What are Loss Functions?

Retrieving OpenStreetMap data in Python

What Big Data and UFOs Have in Common

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ishan Mehta

Ishan Mehta

More from Medium

Add data labels in a scatter plot using Python Matplotlib | Eugene Tsai

Write in Excel file using Python

How to merge multiple excel files using python

Changing the look of your Jupyter workspace!