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
Exercise instructions
- Add a
dcc.
)object that allows a user to select a single date with identifiersale_date
below line25
. - 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 ofecom_sales
below line27
. - Add a component that will render a Plotly figure with identifier
sales_cat
below line37
.
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)