Sales Dashboard in Python by Plotly Dash 2

Sales Dashboard in Python by Plotly Dash
Sales Dashboard in Python by Plotly Dash
Sales Dashboard in Python by Plotly Dash

Build sales dashboard in python using interactive plotly data visualization library and dash web app library.

There are five graphs and one drop down list in this Sales Dashboard in Python by Plotly Dash using interactive plotly data visualization library and dash web app library. Two graphs are connected with input component of dash and data on these two graphs are changed dynamically by selecting country name from the drop down list. Other three graphs are work as output. Choropleth displays geographically data for each country. By selecting any country from the drop down list, highlighted color displays selected country on the map chart. It also shows the information for specific country data by hovering on that country location.

Import Library

Lines 1-6

See below in the code template, I have imported necessary library for this dashboard. I have used dash html components, dash core components, plotly interactive data visualization graph objects library and pandas for importing specific data from the data frame.

Data

Line 10

By using pandas read function, read the CSV data file and you need to insert encoding argument inside the read function to read this file correctly.

Title

Lines 12-27

First of all create dash app layout. Inside dash app layout, give title name to this dashboard as you want and format this title according to your system screen resolution using custom html style library because I have not used in this dashboard dash bootstrap components. In some dashboards, you will see there dash bootstrap components. Similarly, give author name to this dashboard as you want and format it using html style properties.

Drop Down List

Lines 29-41

You can see in the above images, I have used only one input component that is drop down list. Using this drop down list, user can track specific data for specific region. I have used dash core components to create this drop down list. Use unique function of pandas and select specific column name from the data frame to choose value in the drop down list. There are many parameters for drop down list component, I have used many of there. Select any country name in the value parameter to keep data for this country in the dashboard.

Charts

Lines 45-84

I have created five charts in this dashboard using dash core components. Only two charts are changed dynamically by changing any input value from the input component. Other three work as output or static. We can create dashboard in python by plotly dash as output without input component and update data regularly in that dashboard by updating the data in the data source. Style the layout of these charts according to your system screen resolution using html style properties and adjust the each chart width as per requirement. Give unique id to each chart to avoid an error.

Data and Layout for each chart

Lines 87-453

First of all, I have created Choropleth map chart. To create this type of map chart we need only name of countries. Create specific data frame to create this type of map chart. I have used many parameters to create this map chart. For example, hover text parameter is very useful to create hover effect on any chart. You can see other properties of this chart in the below code template.

Second chart is bubble chart. Create specific data frame for this chart and size of bubbles on the chart can be increased or decreased by dividing numerical value. I have used many parameters or properties of this chart, more details you can view below in the code template. If you have any issue related to this code, please comment in the below comment box. I will help you as soon as possible.

Third chart is horizontal bar chart. This chart is static and it works as output. It displays data on horizontal bar chart for top 10 countries. First of all create specific data frame for this horizontal bar chart and I have used color scale for bars color. You can view in the above image, some bars have different color. The data frame for this chart can be viewed below the define function of chart in the code template.

Fourth and fifth charts are pie charts. Fourth chart displays data for status of each product and fifth chart displays data for size of deal. Both charts are static or work as output. If you see in the data property of pie chart below, I have used values parameter to display data on the pie chart. We can use only name of data frame in the plotly pie chart and we cannot use direct column names of specific data frame inside data property of pie chart. You can view more details below in the code template.

Download the csv data file using the below link.

https://www.kaggle.com/kyanyoga/sample-sales-data

To see full code,hover on the code area and use horizontal scrollbar if needed.


If you have any problem in learning above code, please comment in the comment box. I will help you as soon as possible.


Recommended For You

About the Author: Mubeen Ali

I am passionate about learning Dash. Dash is a python framework that creates beautiful web based data visualization dashboards.