ComeçarComece de graça

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.

Este exercício faz parte do curso

Building Dashboards with Dash and Plotly

Ver curso

Instruções do exercício

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

Exercício interativo prático

Experimente este exercício completando este código de exemplo.

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)
Editar e executar o código