Hey everyone,
I’m finishing building an app for my work and have created three filters using dcc.RadioItems, dcc.DatePickerRange, and dcc.Dropdown. I have gotten the Radio Items to accurately update my graph, however, the other two are doing nothing visible. The dropdown has no effect visually, nor throws an error while the date picker throws this error:
ValueError: ('Lengths must match to compare', (4822,), (1,))
This is the code I have used for my app layout and the callback. Please help.
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
server = flask.Flask(__name__) # define flask app.server
app = dash.Dash(__name__, server=server, external_stylesheets=external_stylesheets)
# LAYOUT
app.layout = html.Div(children = [ # Full page container
html.Div([ # Header
html.Div([], className = 'col-2'),
html.Div([
html.Img(src=app.get_asset_url('logo.png'), style={'float':'left'}),
html.Img(src=app.get_asset_url('logo.png'),width='200', style={'float':'right'}),]),
html.Div([
html.H1(children='Title',
style = {'textAlign':'center', 'padding-top' : '1%'},
className = 'col-12'),
]),
html.Div([
html.P('Instructions:',
style = {'textAlign':'center', 'padding-left':'8%'},
className = 'col-12'),
html.P('Press the desired metric to adjust the graphs',
style = {'textAlign':'center'},
className = 'col-12'),
html.P('3D Time Analysis: Double click to isolate a single newsletter. Double click again to return',
style = {'textAlign':'center', 'padding-bottom' : '1%'},
className = 'col-12'),
])
]),
html.Hr(),
# FILTERS
html.Div([
dcc.RadioItems(
id='yaxis-column',
options=[{'label': i, 'value': i} for i in ['Median Open Rate (%)', 'Median Click Rate (%)']],
value='Median Open Rate (%)',
labelStyle={'display': 'inline-block'},
className = 'container'
),
dcc.DatePickerRange(
id='date-picker-range',
min_date_allowed=df['Date'].min(),
max_date_allowed=df['Date'].max(),
start_date_placeholder_text="Start Date",
end_date_placeholder_text="End Date",
initial_visible_month=date(2021, 3, 24),
start_date=df['Date'].min(),
end_date=df['Date'].max(),
style={'display':'inline-block', 'padding-left':'33%'}
),
dcc.Dropdown(id = 'categories',
options=[
{'label': 'All Newsletters', 'value': 'all'},
{'label': '8PM Headlines', 'value': '8PM'},
{'label': 'Breaking News', 'value': 'BKN'},
{'label': 'Coronavirus', 'value': 'COVID'},
{'label': 'Daily Forecast', 'value': 'DF'},
{'label': 'Good Morning San Antonio', 'value': 'GMSA'},
{'label': 'Insider', 'value': 'INS'},
{'label': 'Explains', 'value': 'EXP'},
{'label': 'Kids', 'value': 'KK'},
{'label': 'Lunchtime Look', 'value': 'LL'},
{'label': 'Rush Hour Rundown', 'value': 'RHR'},
{'label': 'SAQ', 'value': 'SAQ'},
{'label': 'Something Good', 'value': 'SG'},
{'label': 'Spurs', 'value': 'SPUR'},
{'label': 'Vote 2020', 'value': 'V2020'},
], style={'display': 'inline-block', 'width':'52%', 'padding-left':'27%'}, placeholder='Select Newsletter',
)
],
style={'width': '125%', 'display': 'inline-block'}),
# GRAPHS
html.Div(children = [
html.Div([
html.Div([
dcc.Graph(id = 'timeWindow',figure = fig1, style={'display': 'inline-block', 'padding-left':'25%'}),
dcc.Markdown('*Daily Time Windows*',
className = 'col-12',style={'textAlign':'center'})
], className = 'six columns'),
html.Div([
dcc.Graph(id='3dScatPlot', figure = fig4,style={'display': 'inline-block', 'padding-left':'25%'}),
dcc.Markdown('*Interactive 3D Time Windows*',
className = 'col-12',style={'textAlign':'center'})
], className = 'six columns'),], className='row'),
html.Hr(),
html.Div([
html.Div([
dcc.Graph(id = 'trends',figure = fig5,style={'display': 'inline-block', 'padding-left':'26%'}),
dcc.Markdown('*Newsletter Category Efficiencies*',
className = 'col-12',style={'textAlign':'center'})
], className = 'six columns'),
html.Div([
dcc.Graph(id = 'automated',figure = fig10,style={'display': 'inline-block', 'padding-left':'22%'}),
dcc.Markdown('*Automated vs Written Newsletter Efficiencies*',
className = 'col-12',style={'textAlign':'center'})
], className = 'six columns')]),
html.Hr(),
html.Div([
html.Div([
dcc.Graph(id = 'wordAnalysis',figure = fig8, style={'display': 'inline-block', 'padding-left':'70%'}),
dcc.Markdown('*Subject Title Efficiencies*',
style={'padding-left':'90%', 'textAlign':'center'})
], className = 'six columns')], className='row'),
], id = 'graphs')
])
####### CALLBACKS ######
##### MOR vs. MCR Update
@app.callback(Output('timeWindow', 'figure'),
[Input('yaxis-column', 'value'),
Input('categories','value'),
Input('date-picker-range','start_date'),
Input('date-picker-range','end_date')])
def update_graph1(value1, value2, start_date, end_date): #, start_date, end_date
dff = df.copy()
if value1 == '8PM':
dff = dff[dff['Newsletter'] == "8PM Headlines"]
elif value1 == 'BKN':
dff = dff[dff['Newsletter'] == "Breaking News"]
elif value1 == 'COVID':
dff = dff[dff['Newsletter'] == "Coronavirus"]
elif value1 == 'DF':
dff = dff[dff['Newsletter'] == "Daily Forecast"]
elif value1 == 'GMSA':
dff = dff[dff['Newsletter'] == "Good Morning San Antonio"]
elif value1 == 'INS':
dff = dff[dff['Newsletter'] == "Insider"]
elif value1 == 'EXP':
dff = dff[dff['Newsletter'] == "Explains"]
elif value1 == 'KK':
dff = dff[dff['Newsletter'] == "Kids"]
elif value1 == 'LL':
dff = dff[dff['Newsletter'] == "Lunchtime Look"]
elif value1 == 'RHR':
dff = dff[dff['Newsletter'] == "Rush Hour Rundown"]
elif value1 == 'SAQ':
dff = dff[dff['Newsletter'] == "SAQ"]
elif value1 == 'SG':
dff = dff[dff['Newsletter'] == "Something Good"]
elif value1 == 'SPUR':
dff = dff[dff['Newsletter'] == "Spurs"]
elif value1 == 'V2020':
dff = dff[dff['Newsletter'] == "Vote 2020"]
else:
pass
dff = df[(df['Date'] >= pd.to_datetime([start_date])) & (df['Date'] <= pd.to_datetime([end_date]))]
timeF = dff.copy()
timeF = timeF.groupby(['Weekday','Hour']).agg({'Open %':'median','Click %':'median','Sends':'median'})
timeF = timeF.reset_index()
timeF['Weekday'] = timeF['Weekday'].apply(str)
timeF['Weekday'] = timeF['Weekday'].replace(['1','2','3','4','5','6','7'],['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'])
timeF = timeF[timeF['Hour'] > 5]
timeF = timeF[timeF['Open %'] < 50]
timeF.columns = ['Weekday','Hour','Median Open Rate (%)','Median Click Rate (%)','Sends']
if value2 == 'Median Open Rate (%)':
fig1 = px.bar(timeF, x = 'Hour', y = 'Median Open Rate (%)',
facet_col='Weekday', color = "Sends", facet_col_wrap=4,facet_col_spacing=0.1, facet_row_spacing=0.15,
title = 'Time Windows', width = 625, height = 500)
fig1.update_xaxes(tick0 = 6, dtick = 4)
fig1.for_each_annotation(lambda a: a.update(text=a.text.split("=")[-1]))
return fig1
elif value2 == 'Median Click Rate (%)':
fig1 = px.bar(timeF, x = 'Hour', y = 'Median Click Rate (%)',
facet_col='Weekday', color = "Sends", facet_col_wrap=4,facet_col_spacing=0.1, facet_row_spacing=0.15,
title = 'Time Windows', width = 625, height = 500)
fig1.update_xaxes(tick0 = 6, dtick = 4)
fig1.for_each_annotation(lambda a: a.update(text=a.text.split("=")[-1]))
return fig1
else:
fig1 = px.bar(timeF, x = 'Hour', y = 'Median Open Rate (%)',
facet_col='Weekday', color = "Sends", facet_col_wrap=4,facet_col_spacing=0.1, facet_row_spacing=0.15,
title = 'Time Windows', width = 625, height = 500)
fig1.update_xaxes(tick0 = 6, dtick = 4)
fig1.for_each_annotation(lambda a: a.update(text=a.text.split("=")[-1]))
return fig1