LoslegenKostenlos loslegen

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.

Diese Übung ist Teil des Kurses

Building Dashboards with Dash and Plotly

Kurs anzeigen

Anleitung zur Übung

  • 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.

Interaktive Übung

Versuche dich an dieser Übung, indem du diesen Beispielcode vervollständigst.

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)
Code bearbeiten und ausführen