Streamlit Dashboard with Dynamic Plots

Streamlit is a powerful Python library that helps you build Web apps in with few lines of code.

We will make a dashboard showing weather details of Delhi city. Below is the rough layout of the same.

Setup

To get started, we first need to install streamlit and plotly libraries.

pip install streamlit
pip install plotly

We now create a python script named WeatherDashboard.py. Lets import all the required libraries.

#importing all the required libraries
import streamlit as st
import time
import plotly.graph_objects as go
import pandas as pd
import numpy as np

Data

We will use the “Daily Climate time series data” Kaggle dataset which provides data from 1st January 2013 to 24th April 2017 in the city of Delhi, India.

Daily Climate time series data

Lets import the data into a dataframe. We also need to convert the ‘date’ into datetime type as its read as a string.

#reading data
df = pd.read_csv('Data/DailyDelhiClimateTrain.csv')
df['date'] = pd.to_datetime(df['date'])

Dashboard Layout

Now we have to define the page layout in streamlit. It provides various options for controlling different elements are laid out on the screen. You can find the documentation here. For this project, we will use st.container()for storing the dashboard heading and the dropdown menu to select weather parameters. For the plot we will use st.empty() as it can contain a single element. As you will see later that every time we create a new plot, we need to overwrite the previous one. If we use st.container() we will get new plots displayed one below the other.

#defining containers
header = st.container()
select_param = st.container()
plot_spot = st.empty()

Now we can define the title and the drop down menu by using the code below. Note that we need to delete ‘date’ from the parameter list as it will not be one of the parameters to choose from.

#title
with header:
    st.title("Delhi Daily Weather Dashboard")
#select parmeter drop down
with select_param:
    param_lst = list(df.columns)
    param_lst.remove('date')
    select_param = st.selectbox('Select a Weather Parameter',   param_lst)

Plot

Now we will define a function that can make our plot and write it in the streamlit element. Here y_col is the selected parameter in the above drop down menu. Along with the parameter, we will also pass the y-axis range to be displayed.

#function to make chart
def make_chart(df, y_col, ymin, ymax):
    fig = go.Figure(layout_yaxis_range=[ymin, ymax])
    fig.add_trace(go.Scatter(x=df['date'], y=df[y_col],           mode='lines+markers'))
    
    fig.update_layout(width=900, height=570, xaxis_title='time',
    yaxis_title=y_col)
    st.write(fig)

So now we will run a loop to call the above function every 0.5 seconds. At one point in tie, we will display the plot for only 30 days (hence we will pass a subset of dataset that contains only 30 days). Our plot will move one day ahead in every interval.

#func call
n = len(df)
ymax = max(df[select_param])+5
ymin = min(df[select_param])-5
for i in range(0, n-30, 1):
    df_tmp = df.iloc[i:i+30, :]
    with plot_spot:
        make_chart(df_tmp, select_param, ymin, ymax)
    time.sleep(0.5)

Run the Web App

Finally we will save the changes and run the following command to launch the web app. We will get the URL.

streamlit run WeatherDashboard.py

This is how our dashboard looks.

Weather Dashboard