Inizia subitoInizia gratis

Combinare HTML e Dash

Hai collaborato con un'azienda di e-commerce per visualizzare i loro dati, e ora è il momento di fare un salto di qualità nella presentazione.

Il tuo obiettivo è mostrare insieme, in un'unica dashboard Dash, i grafici a linee e a barre che hai creato in precedenza, line_graph e bar_graph. Per completare il tutto, aggiungerai anche un titolo nella parte superiore del layout.

I grafici a linee e a barre (line_graph e bar_graph) sono stati ricreati per te.

Questo esercizio fa parte del corso

Creare dashboard con Dash e Plotly

Visualizza corso

Istruzioni dell'esercizio

  • Aggiungi un titolo alla tua app Dash come .H1() contenente il testo 'Sales by Country & Over Time'.
  • Aggiungi le figure line_graph e bar_graph al layout della app Dash.

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