Creating Streamlit Dashboard from scratch. | by Himanshu Sharma | Towards Data Science

Building Dashboards was never easy, creating a dashboard requires knowledge of bootstrap, HTML, CSS, a lot of time etc.but by using streamlit we can create highly interactive and visually appealing dashboards just with a few lines of code. So let’s start building our dashboard but first let us take a look to understand streamlit.
Streamlit is an open-source Python library which is blazingly fast that makes it easy to build beautiful custom web-apps for machine learning and data science. It is an awesome tool that allows you to create highly interactive dashboards just with some knowledge of python. We will start by installing the streamlit and see how it works.
Installing Streamlit
pip install streamlit
Checking out some demos available on streamlit. For this, we need to run the command given below in the command prompt. This command allows you to explore Streamlit demos that are preloaded. You must check these out as they are really interesting.
streamlit hello
Now let us create our own dashboard. Here I will be creating a dashboard for Analyzing the Top 5 Gainers and Losers of the Indian stock market from May 2019-May 2020. For building this let us import some of the libraries that we need. Please note you need to create a script for streamlit and run it, so we will be using any code editor like Atom or Notepad++ and save it with .py format.
import streamlit as stimport pandas as pdimport numpy as npimport plotly.express as pxfrom plotly.subplots import make_subplotsimport plotly.graph_objects as goimport matplotlib.pyplot as plt
All these libraries will be used for mathematical computation and visualization of the stock data. Now let us import our data by using pandas, here I have created separate files for gainers and losers, so we will import both the files.
DATA_URL = ("C:/Users/Divya/gainers.csv")DATA_UR= ("C:/Users/Divya/losers.csv")df=pd.read_csv(DATA_URL)df1=pd.read_csv(DATA_UR)
After importing our data files let us begin by setting the title of our dashboard. For this, we will be using st.title for the main title and st.sidebar.title for sidebar title as given below.
st.title("Share Price analysis for May 2019 to May 2020:")st.sidebar.title("Share Price analysis for May 2019 to May 2020:")st.markdown("This application is a Share Price dashboard for Top 5 Gainers and Losers:")st.sidebar.markdown("This application is a Share Price dashboard for Top 5 Gainers and Losers:")
You can save this file and run it in streamlit to view changes. You will see your dashboard with the titles you mentioned. I store my file as share_new.py so I will run by typing the command given below.
streamlit run share_new.py
The best thing about streamlit is that it is blazingly fast i.e. you can save changes in your script and the application will immediately reflect the changes, you don’t need to refresh the application again and again.
In this dashboard, we are going to create the candlestick charts for all the stocks in our dataset. Also, we will be plotting the Moving Averages for these stocks. Starting with creating heading for Gainers and creating a selectbox for selecting the share you want to analyze.
st.sidebar.title("Gainers")select = st.sidebar.selectbox('Share', ['Adani Green Energy', 'GMM Pfaudler', 'AGC Networks', 'Alkyl Amines Chem', 'IOL Chem & Pharma'], key='1')
As soon as you save the file the changes will be reflected in your application.
Now we will write code for creating a checkbox to enable or disable the visualization of the candlestick chart and create a candlestick chart for all the stocks. The code given below will create the candlestick chart for ‘Adani Green Energy’ and will also calculate and display the Moving averages for this share.
if not st.sidebar.checkbox("Hide", True, key='1'):    st.title("Gainers")    if select == 'Adani Green Energy':        for i in ['AdaLow', 'AdaHigh', 'AdaClose', 'AdaOpen']:            df[i] = df[i].astype('float64')avg_20 = df.AdaClose.rolling(window=20, min_periods=1).mean()avg_50 = df.AdaClose.rolling(window=50, min_periods=1).mean()avg_200 = df.AdaClose.rolling(window=200, min_periods=1).mean()set1 = { 'x': df.AdaDate, 'open': df.AdaOpen, 'close': df.AdaClose, 'high': df.AdaHigh, 'low': df.AdaLow, 'type': 'candlestick',} set2 = { 'x': df.AdaDate, 'y': avg_20, 'type': 'scatter', 'mode': 'lines', 'line': { 'width': 1, 'color': 'blue' },'name': 'MA 20 periods'}set3 = { 'x': df.AdaDate, 'y': avg_50, 'type': 'scatter', 'mode': 'lines', 'line': { 'width': 1, 'color': 'yellow' },'name': 'MA 50 periods'}        set4 = { 'x': df.AdaDate, 'y': avg_200, 'type': 'scatter', 'mode': 'lines', 'line': { 'width': 1, 'color': 'black' },'name': 'MA 200 periods'}        data = [set1, set2, set3, set4]        fig = go.Figure(data=data)        st.plotly_chart(fig)
Similarly, we can create the candlestick chart for all the shares listed in the dataset but repeating the code mentioned above, the final dashboard will display all the share mentioned in the dataset.
The video displays the final dashboard created, the candlestick charts are created using Plotly so that they are interactive and the moving averages can be enabled or disabled accordingly. This dashboard is created in less than 2 hours and is highly interactive and visually appealing.
This is just an example of what streamlit can do. You can explore more to learn about infinite features that streamlit provide to create web-apps and dashboards. Please write in response if you find any difficulty in creating your own dashboards and share your experiences with me.
towardsdatascience.com
Thanks for reading! If you want to get in touch with me, feel free to reach me on hmix13@gmail.com or my LinkedIn Profile. You can also view the code and data set I have used here in my Github. Also, feel free to explore my profile and read different articles I have written related to Data Science.