Create web-based dashboard within minutes

Streamlit is one of the most recent python libraries for powerful Dashboard creation and an open source framework for machine learning and data science teams. It can produce industry standard and visually attractive dashboards with very simple coding. I have created a sales dashboard with similar visual created with Power BI in this link. The data is about the sales revenue earned during the first few months of 2019 across different products, employee and supervisors. Power BI is a very powerful tool for instant visuals creation but here I wanted to regenerate similar dashboard using the open source Streamlit. Let’s dive into the dashboard creation.
Fetching the data
The data is an excel file showing units sold, price per unit, product ID, employee ID, supervisors in different worksheets on the file. In excel, it will be very easy to calculate the revenue based on different products and employee. One can simply vlookup the data from other sheets but one can have more control on the visuals when using Streamlit.
First things first
Streamlit installation is a one liner using pip
pip install streamlit
Once the Streamlit is installed, I opened the PyCharm IDE and created new file names "Streamlit_sales_data". To run this file, I went to the terminal and then to the file directory using cd command. Then the following command is executed to run the file in the browser.
streamlit run Streamlit_sales_data.py
The browser will deliver the contents of the dashboard controlled by the code powered by Streamlit.
Sweet coding
First, let’s start by importing required libraries
Streamlit considers docstring as magic commands and keeps up showing in the browser. Therefore, a simple workaround was used to create a variable named comment before every docstring.
The options of displaying the sales, product and employee data are created using checkboxes. Once checked, it will deliver the panda data frame to pop up in the browser using st.write().
A sidebar is very useful for filtering instead of doing that in the main page. Next, a sidebar was created using st.sidebar and then the dropdowns for product ID, employee ID and supervisors were created. Since we have multiple instances for each of this category and viewer can be interested to look for a subset of the whole dataset, multi-select option is enabled in the sidebar multiselect widget.
Revenue is not directly provided in the dataset. So, we have to calculate it using merge capability of the first two data frames and then sorted according to date.
The next feature is for time based filtering. To have that capability, we need to have a start date and end date during which the revenue will be calculated and displayed. The widgets for the dates are created next
The sidebar will be rendered as below.


After close observation on the dataset, I found that the date column is monotonically increasing (since we have sorted it by date) but not all dates are there from Jan 1 to Apr 20. If the user’s input falls into the no man’s land (should be no date’s land !), the program needs to monotonically increase the start date and decrease the end date by 1 day to match the user input. This is carried out in the following code.
The start_index and the end_index are the two indices calculated from the user input. The rest of the code is self-explanatory. The filter checkbox is created next. Once checked, it will apply the filter to the dataset and refresh the page with updated visuals and data.
Finally, the functions for bar plot, pie chart and line chart are added in the code.



The function for pie chart was targeted towards the supervisor data. Since not all supervisors have command over all the employees, it may provide empty data frame if there is no overlap of data between the supervisor and the employees and/or products.
The total revenue is displayed in plain text for the applied filter.
Final look
Once the code is triggered, the following dashboard is delivered in the browser


The whole dataset can be filtered in the sidebar based on product ID, employee ID and supervisor to have all different kind of visuals.
Conclusion
Streamlit provides a very user friendly interface for the creation of industry standard dashboards. As you have seen in this coding, it has Powerful techniques to integrate all the python features as well as coming up with attractive visuals and filtering. The code for connecting the datasets with the filtering according to date, product, employee or supervisor is simple yet powerful. My github repo provides the necessary code implemented to create the dashboard.
Reference: Streamlit documentation