CommencezCommencez gratuitement

Combiner HTML et Dash

Vous collaborez avec une entreprise de commerce électronique pour les aider à visualiser leurs données, et il est maintenant temps d'améliorer la présentation.

Votre objectif est d'afficher ensemble, dans un seul tableau de bord Dash, les graphiques linéaire et à barres que vous avez créés précédemment, line_graph et bar_graph. Pour compléter le tout, vous ajouterez aussi un titre en haut du gabarit.

Les graphiques linéaire et à barres (line_graph et bar_graph) ont été recréés pour vous.

Cette activité fait partie du cours

Créer des tableaux de bord avec Dash et Plotly

Voir le cours

Instructions de l’exercice

  • Ajoutez un titre à votre application Dash sous forme de .H1() contenant le texte 'Sales by Country & Over Time'.
  • Ajoutez les figures line_graph et bar_graph au gabarit (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