Aan de slagBegin gratis

HTML en Dash combineren

Je werkt samen met een e-commercebedrijf om hun data te visualiseren, en nu is het tijd om de presentatie naar een hoger niveau te tillen.

Je doel is om de lijn- en staafdiagrammen die je eerder maakte, line_graph en bar_graph, samen te tonen in één Dash-dashboard. Om het geheel af te maken, voeg je ook een titel toe bovenaan de layout.

De lijn- en staafdiagrammen (line_graph en bar_graph) zijn alvast voor je klaargezet.

Deze oefening maakt deel uit van de cursus

Dashboards bouwen met Dash en Plotly

Bekijk cursus

Oefeninstructies

  • Voeg een titel toe aan je Dash-app als een .H1() met de tekst 'Sales by Country & Over Time'.
  • Voeg de figuren line_graph en bar_graph toe aan de layout van de Dash-app.

Interactieve oefening met praktijkervaring

Probeer deze oefening door deze voorbeeldcode aan te vullen.

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)
Code bewerken en uitvoeren