Get startedGet started for free

Combining HTML and Dash

Building on your recent graph work for the e-commerce company, you want to be able to show them both of the graphs in a single dashboard.

Luckily you have been working on your basic HTML positioning in Dash and have mastered the .Div() structural element. With these powerful tools in your hand, you can take your dashboard to the next level and create a Dash application to serve up both the line and bar graph you previously created. Since this is now a proper dashboard, it would be good to add a title at the top as well.

The line and bar graphs (line_graph and bar_graph) have been recreated for you.

This exercise is part of the course

Building Dashboards with Dash and Plotly

View Course

Exercise instructions

  • Create a blank Dash app object on line 13.
  • Set up the layout using an overall .Div(), ensuring it will be able to take multiple sub-elements.
  • Add a title to your Dash app as a .H1() containing the text 'Sales by Country & Over Time'.
  • Add the line and bar graphs to the Dash app layout.

Hands-on interactive exercise

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

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

# Create the Dash app
app = ____.____(__name__)

# Set up the layout using an overall div
app.layout = html.____(
    ____=[
  # Add a H1
  html.____(____),
  # Add both graphs
  ____.____(id='line_graph', figure=____),
  ____.____(id='bar_graph', figure=____)
  ])

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