Create and deploy your first real-time dashboard with Streamlit

A dashboard is a kind of graphical user interface that often allows quick access to key performance indicators (KPIs) related to a certain goal or business activity. In other contexts, “dashboard” refers to a “progress report” or “helps summarize progress” and is a type of data display. Dashboards can help business owners save time and make better decisions by providing this overview. In this article, we will create and deploy dashboards in python with the help of Streamlit.

Contents

  1. About Streamlit
  2. Creation of a dashboard
  3. Deployment of a dashboard

Let’s start with a brief introduction to Streamlit.

About Streamlit

Streamlit is a free, open-source, all-Python framework that allows data scientists to easily build interactive dashboards and machine learning web applications without any prior knowledge of front-end web development. If you know Python, you can use Streamlit to develop and deliver web applications in hours, not weeks. Streamlit is a set of free tools to create innovative dashboards.

Advantages

  • Anyone who understands Python can use Streamlit. There are no HTML or CSS requirements.
  • It has a diverse set of UI components. It includes almost all the standard UI components, such as a checkbox, slider, collapsible sidebar, radio buttons, file upload, progress bar, etc. In addition, these components are quite simple to use.
  • It supports a variety of interactive visualization libraries including Latex, OpenCV, Vega-Lite and others.

Disadvantages

  • Although not difficult, learning the syntax of Streamlit does take some time.
  • Streamlit is not very adaptable. It is exclusively based on Python, has a limited number of widgets and does not connect to Python Notebooks.
  • The maximum data upload size is 50 MB.
  • There is just limited video/animation support.

Are you looking for a comprehensive repository of Python libraries used in data science, check here.

Creation of a dashboard

Let’s start by installing the Streamlit.

! pip install streamlit -q

Import some libraries needed for data reading, manipulation and visualization

import pandas as pd
import numpy as np
import warnings 
warnings.filterwarnings('ignore')
import plotly.express as px

Reading data and preprocessing for visualization

df =pd.read_csv("Real-Time_Traffic_Incident_Reports.csv")
df[:8]

The data is related to the crime, so it contains the identifiers of the reports, the time and date the crime occurred and the categorization of the crime. Let’s clean the data and extract the date and year from the data for visualization.

df_utils=df.dropna(axis=0)
df_utils.reset_index(drop=True,inplace=True)
 
a=df_utils['Published Date'].str.split(" ")
b=[]
for i in range(0,len(a)):
 c=a[i][0]
 b.append(c)
 
d=df_utils['Status Date'].str.split(" ")
e=[]
for i in range(0,len(a)):
 f=d[i][0]
 e.append(f)
 
g=df_utils['pub_date'].str.split('/')
h=[]
for i in range(0,len(a)):
 f=g[i][2]
 h.append(f)
 
df_utils['pub_date']=b
df_utils['stat_date']=e
df_utils['pub_year']=h
 
df_utils[:5]

The data is ready to be used for the visualization part. Before that, let’s create a python for the web application. This web application file will be used by streamlit to host the dashboard on the local server. This article is based on the Google Colab Python notebook, so it would be different from the local runtime kernel.

%%writefile app.py

This line of code will create a python file named ‘app’ and ‘%%writefile’ will overwrite all previous versions of app.py with the new one. We use it to save time and effort by not editing one by one. The above code would be as it is, just copy-paste it and escape all print codes. So the code will look like this.

%%writefile app.py
import streamlit as st
import pandas as pd
import numpy as np
import plotly.express as px
 
df = pd.read_csv("/content/drive/MyDrive/Datasets/Real-Time_Traffic_Incident_Reports.csv")
df_utils=df.dropna(axis=0)
df_utils.reset_index(drop=True,inplace=True)
a=df_utils['Published Date'].str.split(" ")
# for publish date
b=[]
for i in range(0,len(a)):
 c=a[i][0]
 b.append(c)
#for status date
d=df_utils['Status Date'].str.split(" ")
e=[]
for i in range(0,len(a)):
 f=d[i][0]
 e.append(f)
df_utils['pub_date']=b
df_utils['stat_date']=e
g=df_utils['pub_date'].str.split('/')
h=[]
for i in range(0,len(a)):
 f=g[i][2]
 h.append(f)
df_utils['pub_year']=h

The application file is now updated with preprocessed data. Let’s write some code for the dashboard front end.

st.header("Real-Time Dashboard")
chart_selector = st.sidebar.selectbox("Select the type of chart", ['Pie chart','Bar chart'])
col1, col2 = st.columns(2)

If you are familiar with HTML tags and elements, it would be much easier for you to understand streamlit code. The tag will create a header for the page in this post, it is “Realtime Dashboard”. Similarly, the sidebar component will create a drop-down menu and the user can choose from the options.

The column component will split the output screen into as many columns as one defines. Here we only used two columns. There are a whole bunch of HTML and CSS components that could be used to modify the dashboard.

So, depending on the option selected from the drop-down menu, we have to display the graphs accordingly. Let’s create graphs and update the application file.

if chart_selector=='Pie chart':
  pie_chart = px.pie(df_utils, values="pub_year", names="Issue Reported")
  col1.plotly_chart(pie_chart,use_container_width = True)
else:
  bar_chart = px.histogram(df_utils, x="Issue Reported", color="pub_year")
  col2.plotly_chart(bar_chart,use_container_width = True)

Deployment of a dashboard

The application file is ready to be deployed on the local server. As in this article, google, colab notebook is used, so things will be different from local runtime hosting. Usually for hosting on colab ‘Ngrok’ is used which is a bit complex but there is a simpler solution ‘local tunnel’. In this article, the ‘local tunnel’ will be used to host the application.

! streamlit run app.py & npx localtunnel --port 8501

This will download the local tunnel and create a web link for the streamlit app. Each time this code is run, it will generate a new link.

Once the URL is generated, click on it and it will redirect to a warning page that warns about phishing, because one can duplicate any web application and host this application. The page will look like this.

Just click on the “Click to continue” button and the streamlit web application will be loaded. Sometimes it takes time depending on data size, internet connection etc. Here is an example of how the dashboard above looks like.

Last words

Streamlit is simple to use and gives good results, even though it is only intended for basic programs. Multi-page apps with complicated layouts aren’t really meant for this, which is understandable. With this article, we have understood how to design a dashboard and deploy it on a server using Streamlit.

References

Lance B. Holton