ComeçarComece de graça

Combinando HTML e Dash

Você está trabalhando com uma empresa de e-commerce para ajudar a visualizar os dados deles, e agora é hora de elevar a apresentação.

Seu objetivo é exibir, juntos em um único dashboard em Dash, os gráficos de linha e de barras que você criou anteriormente, line_graph e bar_graph. Para deixar tudo completo, você também vai adicionar um título no topo do layout.

Os gráficos de linha e de barras (line_graph e bar_graph) foram recriados para você.

Este exercício faz parte do curso

Construindo Dashboards com Dash e Plotly

Ver curso

Instruções do exercício

  • Adicione um título ao seu app Dash como um .H1() contendo o texto 'Sales by Country & Over Time'.
  • Adicione as figuras line_graph e bar_graph ao layout do app Dash.

Exercício interativo prático

Experimente este exercício completando este código de exemplo.

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 e executar o código