EmpezarEmpieza gratis

Combinando HTML y Dash

Has estado trabajando con una empresa de comercio electrónico para ayudarles a visualizar sus datos, y ha llegado el momento de mejorar la presentación.

Tu objetivo es mostrar juntos, en un único panel de Dash, los gráficos de líneas y de barras que creaste antes, line_graph y bar_graph. Para completarlo, también añadirás un título en la parte superior del diseño.

Los gráficos de líneas y de barras (line_graph y bar_graph) se han recreado para ti.

Este ejercicio forma parte del curso

Creación de paneles con Dash y Plotly

Ver curso

Instrucciones del ejercicio

  • Añade un título a tu aplicación de Dash como .H1() que contenga el texto 'Sales by Country & Over Time'.
  • Añade las figuras line_graph y bar_graph al diseño de la aplicación de Dash.

ejercicio interactivo práctico

Prueba este ejercicio completando este código de ejemplo.

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)
Editar y ejecutar código