Aan de slagGa gratis aan de slag

A date picker callback

Oh no! It has happened again. The date picker dashboard you created has become corrupted, and the callback code is unreadable.

Can you recall how to integrate a date picker component with a callback to get the dashboard back on track?

Deze oefening maakt deel uit van de cursus

Building Dashboards with Dash and Plotly

Cursus bekijken

Oefeninstructies

  • Create a callback and link the sale_date component to the sales_cat graph below line 31.
  • Conditionally use the input_date parameter to filter the InvoiceDate column of the sales DataFrame below line 38.
  • Return the bar_fig_major_cat figure to render in the Dash app below line 45.

Praktische interactieve oefening

Probeer deze oefening eens door deze voorbeeldcode in te vullen.

from dash import Dash, dcc, html, Input, Output, callback
import plotly.express as px
import pandas as pd
from datetime import datetime, date
ecom_sales = pd.read_csv('/usr/local/share/datasets/ecom_sales.csv')
logo_link = 'https://assets.datacamp.com/production/repositories/5893/datasets/fdbe0accd2581a0c505dab4b29ebb66cf72a1803/e-comlogo.png'
ecom_sales['InvoiceDate'] = pd.to_datetime(ecom_sales['InvoiceDate'])

app = Dash()

app.layout = [
    html.Img(src=logo_link, style={'margin': '30px 0px 0px 0px'}),
    html.H1('Sales breakdowns'),
    html.Div([
		html.H2('Controls'),
        html.Br(),
        html.H3('Sale Date Select'),
        dcc.DatePickerSingle(
            id='sale_date',
            min_date_allowed=ecom_sales['InvoiceDate'].min(),
            max_date_allowed=ecom_sales['InvoiceDate'].max(),
            date=date(2011, 4, 11),
            initial_visible_month=date(2011, 4, 11),
            style={'width': '200px', 'margin': '0 auto'})],
        style={'width': '350px', 'height': '350px', 'display': 'inline-block', 'vertical-align': 'top', 'border': '1px solid black', 'padding': '20px'}),
    html.Div([
        dcc.Graph(id='sales_cat'),
        html.H2('Daily Sales by Major Category', style={'border': '2px solid black', 'width': '400px', 'margin': '0 auto'})], 
    	style={'width': '700px', 'display': 'inline-block'})
]
# Create a callback and link
@callback(
    ____(component_id='____', component_property='____'),
    ____(component_id='____', component_property='____')
)
def update_plot(input_date):
    sales = ecom_sales.copy(deep=True)
    # Conditionally filter the DataFrame using the input
    if ____:
        sales = sales[sales['InvoiceDate'] == input_date]
    ecom_bar_major_cat = sales.groupby('Major Category')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
    bar_fig_major_cat = px.bar(
        title=f'Sales on: {input_date}', data_frame=ecom_bar_major_cat, orientation='h',
        x='Total Sales ($)', y='Major Category')
    # Return the figure to render
    return ____

if __name__ == '__main__':
    app.run(debug=True)
Code bewerken en uitvoeren