BaşlayınÜcretsiz Başlayın

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.

Bu egzersiz

Building Dashboards with Dash and Plotly

kursunun bir parçasıdır
Kursu Görüntüle

Egzersiz talimatları

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

Uygulamalı interaktif egzersiz

Bu örnek kodu tamamlayarak bu egzersizi bitirin.

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)
Kodu Düzenle ve Çalıştır