Hello!! I’m new to python.
I’m building a dash app that has two charts:
i) the first is a bar+line graph where the x axis is dates and the y axis is the number of codes on that date. This chart can be modified through a dropdown (month and week filters)
ii) the second chart is a pie chart which is modified via hover data of the first chart.
The challenge here is to get the second graph to work after I select the filters from the dropdown.
I managed to make it work. This is the code:
#LAYOUT
html.Div(children=[
dcc.Dropdown(id='DROPDOWN',
options=[
{'label':'Month', 'value':'Month'},
{'label':'Week', 'value':'Week'}],
html.Div(children=[
html.Div(children=[
dcc.Graph(
id='line_chart', figure=line_fig),
dcc.Graph(
id='pie_chart', figure={})
])
])
])
#CALLBACK FOR THE DROPDOWN
@app.callback(
Output(component_id='line_chart', component_property='figure'),
Input(component_id='DROPDOWN', component_property='value')
)
def update_plot(selection):
df_line_fig = df_line_fig_1.copy(deep=True)
if selection == 'Month':
line_fig = px.line(data_frame = df_line_fig_1, x= 'month', y= 'code')
return line_fig_m1
else:
line_fig = px.line(data_frame = df_line_fig_1, x= 'week', y= 'code')
return line_fig_m1
#CALLBACK FOR THE PIE CHART - HOVERDATA
@app.callback(
Output(component_id='pie_chart', component_property='figure'),
Input(component_id='line_chart', component_property='hoverData'),
Input(component_id='DROPDOWN', component_property='value')
)
def capture_hover_data(hov_data, selection):
df_line_fig = df_line_fig_2.copy(deep=True)
if selection == 'Month':
if hov_data is None:
#made this transposition to be able to use the pie chart
transf_df = df_line_fig_2[df_line_fig_2['month'] == '10 - 2022'].reset_index()
transf_df1 = transf_df[['Group 1', 'Group 2']] #labels that will be shown in the pie chart
transf_df2 = transf_df1.T.reset_index()
pie_fig = px.pie(data_frame = transf_df2, values=0, names='index')
return pie_fig
else:
hov_month = hov_data['points'][0]['x']
#same transformation code
transf_df = df_line_fig_2[df_line_fig_2['month'] == hov_month].reset_index()
transf_df1 = transf_df[['Group 1', 'Group 2']]
transf_df2 = transf_df1.T.reset_index()
pie_fig = px.pie(data_frame = transf_df2, values=0, names='index')
return pie_fig
else:
if hov_data is None:
transf_df = df_line_fig_2[df_line_fig_2['week'] == '03 - 10'].reset_index()
transf_df1 = transf_df[['Group 1', 'Group 2']]
transf_df2 = transf_df1.T.reset_index()
pie_fig = px.pie(data_frame = transf_df2, values=0, names='index')
return pie_fig
else:
hov_week = hov_data['points'][0]['x']
transf_df = df_line_fig_2[df_line_fig_2['week'] == hov_week].reset_index()
transf_df1 = transf_df[['Group 1', 'Group 2']]
transf_df2 = transf_df1.T.reset_index()
pie_fig = px.pie(data_frame = transf_df2, values=0, names='index')
return pie_fig
The problem is that when I change the dropdown filter (month to week or week to month) the following error appears in the dash:
The strange thing is that after this warning the pie chart continues to work normally and updates whenever I move the mouse over the data of the first chart.
The error always shows when I change de filter in the dropdown.
I suspect that the problem is, when I change the filter, the app try to find a data for the pie chart and don’t find. I’ve been trying hard but I am not able to solve it.
Any help here please?
