Sales Dashboard in Python by Plotly Dash 1

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 six graphs and one drop down list in this Sales Dashboard in Python by Plotly Dash with plotly data visualization library and dash library for web app.Selecting any country name from the drop down list, all graphs are dynamically changed.In some graphs,there are secondary y-axis.Custom hover effect is created for each graph to get information related to each product.Yearly sales graph shows sales for each year and it is compared to total number of quantity ordered in each year.Monthly sales graph shows sales for each month for selected country from the drop down list.

Import Library

Lines 1-6

First of all import necessary library for this dashboard. For this type of dashboard, I have used dash core components, dash html components, plotly graph objects and pandas for creating data frame.


Line 9

Read CSV file using pandas read function. Don’t forget to insert encoding argument for escape unicode in CSV file inside read function.


Lines 11-26

First of all create layout of dash. Using html component of dash give title of this dashboard as you want. Style title of dashboard using html style library as you want and adjust it according to your computer screen space. Similarly, give author name of this dashboard and place it right side of dashboard title using float right html library.

Drop Down List

Lines 28-38

Using dash core component, create a drop down list and place it on the middle of the page. Use many parameters of drop down list. For example, type any country name for value parameter. In options parameter, use pandas unique function to retrieve unique country name from the column of country to the data frame.


Lines 41-89

Using dash core components, create layout of six charts. Give unique id to each chart. Select display mode bar False or hover in configuration parameter. Adjust position and width of each chart using html style library according to your system screen resolution.

Data and Layout for each chart

Lines 92-811

After important component of dash that is callback, first of all define each chart and create specific data frame for each chart. Then display data on the chart using the newly created data frame. Format data on the chart using many parameters of chart. Format each chart layout. In layout of chart, we can format x-axis, y-axis and legend values. we can also increase and decrease width of chart. I have used many parameters to format these charts. You can see below these parameters in the code template. Please read the code below step by step, you will find there many useful parameters that are required in plotly chart in data and layout sections.

Download the csv data file using the below link.

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.

2 Comments to “Sales Dashboard in Python by Plotly Dash 1”

Comments are closed.