Get startedGet started for free

Date picker for sales data

The interactive sales dashboard you created was a smash hit; however, it is vital for the sales team to be able to monitor daily sales to analyze patterns and trends. You have been asked if you can extend your work to include a filter to view sales by major category on a particular date?

This sounds like a job for a date picker! You are definitely able to assist with the brief.

This exercise is part of the course

Building Dashboards with Dash and Plotly

View Course

Exercise instructions

  • Add a dcc.)object that allows a user to select a single date with identifier sale_date below line 25.
  • Set the initial date to be April 11, 2011 below line 30.
  • Set the min and max allowable dates of the date picker to be the min and max dates in the InvoiceDate column of ecom_sales below line 27.
  • Add a component that will render a Plotly figure with identifier sales_cat below line 37.

Hands-on interactive exercise

Have a go at this exercise by completing this sample code.

import dash
from dash import dcc, html
import plotly.express as px
import pandas as pd
from dash.dependencies import Input, Output
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.Dash(__name__)

app.layout = html.Div([
  html.Img(src=logo_link, 
        style={'margin':'30px 0px 0px 0px' }),
  html.H1('Sales breakdowns'),
  html.Div(
    children=[
    html.Div(
        children=[
        html.H2('Controls'),
        html.Br(),
        html.H3('Sale Date Select'),
        # Create a single date picker with identifier
        ____(id=____,
            # Set the min/max dates allowed as the min/max dates in the DataFrame
            ____=ecom_sales['____'].min(),
            ____=ecom_sales['____'].max(),
            # Set the initial visible date
            date=date(____),
            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(children=[
      		# Add a component to render a Plotly figure with the specified id
            dcc.____(____),
            html.H2('Daily Sales by Major Category', 
            style={ 'border':'2px solid black', 'width':'400px', 'margin':'0 auto'})
            ],
             style={'width':'700px','display':'inline-block'}
             ),
    ]),
    ], 
  style={'text-align':'center', 'display':'inline-block', 'width':'100%'}
  )

@app.callback(
    Output(component_id='sales_cat', component_property='figure'),
    Input(component_id='sale_date', component_property='date')
)
def update_plot(input_date):
    
    sales = ecom_sales.copy(deep=True)
    if input_date:
        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 bar_fig_major_cat


if __name__ == '__main__':
    app.run_server(debug=True)
Edit and Run Code