Get startedGet started for free

A draft sales dashboard

Given your great work so far with the e-commerce company, they have asked you to jump on board and help them completely replace their existing dashboards that require proprietary software and are costing the organization a mountain of money each month.

This won't be the final product; they want a rough draft of what is possible using Dash. They would like a line chart of their total sales each month, as well as a bar chart of their total sales in each country. It would be good to throw in a high-level summary statistic such as which month was the largest order volume.

Your task is to create a quick dashboard using Plotly plots stacked on top of each other.

This exercise is part of the course

Building Dashboards with Dash and Plotly

View Course

Exercise instructions

  • Set up a Dash layout with an overarching Div that will contain a number of sub elements below line 15.
  • Add a .Div() below line 18 containing a dash component to display the line_fig that was created for you on line 8.
  • Add a .Div() below line 20 containing a dash component to display the bar_fig that was created for you on line 11.
  • Add an .H3() title to the Dash layout that contains the max_country variable (the country with the largest total sales amount), which has been created for you.

Hands-on interactive exercise

Have a go at this exercise by completing this sample code.

import dash
from dash import dcc, html
import plotly.express as px
import pandas as pd
ecom_sales = pd.read_csv('/usr/local/share/datasets/ecom_sales.csv')
ecom_line = ecom_sales.groupby('Year-Month')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
line_fig = px.line(data_frame=ecom_line, x='Year-Month', y='Total Sales ($)', title='Total Sales by Month')
ecom_bar = ecom_sales.groupby('Country')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
max_country = ecom_bar.sort_values(by='Total Sales ($)', ascending=False).loc[0]['Country']
bar_fig = px.bar(data_frame=ecom_bar, x='Total Sales ($)', y='Country', orientation='h', title='Total Sales by Country')

app = dash.Dash(__name__)

# Create the dash layout and overall div
app.____ = html.Div(____=[
    html.H1('Sales Figures'), 
    # Add a div containing the line figure
    html.____(dcc.___(id='my-line-fig', figure=____)), 
    # Add a div containing the bar figure
    html.____(dcc.___(id='my-bar-fig', figure=____)), 
    # Add the H3
    html.____(f'The largest country by sales was {____}')
    ])

if __name__ == '__main__':
    app.run_server(debug=True)
Edit and Run Code