CommencerCommencez gratuitement

Combiner HTML et Dash

Vous travaillez avec une entreprise d’e-commerce pour les aider à visualiser leurs données, et il est temps d’améliorer la présentation.

Votre objectif est d’afficher ensemble, dans un même tableau de bord Dash, les graphiques en courbes et en barres que vous avez créés précédemment, line_graph et bar_graph. Pour finaliser l’ensemble, vous ajouterez aussi un titre en haut du layout.

Les graphiques en courbes et en barres (line_graph et bar_graph) ont été recréés pour vous.

Cet exercice fait partie du cours

<cours>Créer des tableaux de bord avec Dash et Plotly</cours>
Voir le cours

Instructions de l’exercice

  • Ajoutez un titre à votre application Dash avec .H1() contenant le texte 'Sales by Country & Over Time'.
  • Ajoutez les figures line_graph et bar_graph au layout de l’application Dash.

Exercice interactif pratique

Essayez cet exercice en complétant ce code d’exemple.

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)
Modifier et exécuter le code