Inizia subitoInizia gratis

Combining HTML and Dash

You've been working with an e-commerce company to help visualize their data, and now it's time to level up the presentation.

Your goal is to display the line and bar charts you previously created, line_graph and bar_graph, together in a single Dash dashboard. To make it feel complete, you'll also add a title at the top of the layout.

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

Questo esercizio fa parte del corso

Building Dashboards with Dash and Plotly

Visualizza corso

Istruzioni dell'esercizio

  • Add a title to your Dash app as a .H1() containing the text 'Sales by Country & Over Time'.
  • Add the line_graph and bar_graph figures to the Dash app layout.

esercizio interattivo pratico

Prova questo esercizio completando questo codice di esempio.

from dash import Dash, 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')

app = Dash()

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

if __name__ == '__main__':
    app.run(debug=True)
Modifica ed esegui il codice