Callback error with dropdown and hoverdata

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?

Hi @tex.y ,

this is the problem here:

what are you trying to achieve by setting values=0?

Hello! @AIMPED

0 is the name of the column that appears after

transf_df1.T.reset_index()

I already tryed to rename this column, but the error is the same.

If it’s really the name you should specify ‘0’

Waht is the result of data_frame.columns?

to show more context:

This is the datafram before transf_df1.T.reset_index():

image

This is the dataframe after

image

That’s why I used pie_fig = px.pie(data_frame = transf_df2, values=0, names=‘index’) so I can use the pie chart

@AIMPED already tryed too!

this is the error when you set to ‘0’

image

The name of the column is 0

Well, this is a problem with pandas and not related to plotly or dash.

Without your data it will be difficult to help. Maybe you could share your data or an equivalent dummy DataFrame.

Hello @tex.y,

It should be '0' not int 0.

I think you need to change your column names, I dont think it likes integers for columns names, at least not from plotly’s interactions.

I think the main problem is that I have to tranform the columns to rows with:

transf_df1.T.reset_index():

Is there a way I can use px.pie with this type of df?

image

@jinnyzor hello!

I already tryed to change the column name, for examplo to ‘groups’

the same error:

image

You should be able to rename the columns of the df after transforming.

Could you please provide a MRE?

@AIMPED @jinnyzor hello my friends, really sorry if I can’t explain the problem properly. English is not my first language.

What’s happening is nothing to do with the name of the column.

I will try to explain:

  1. When I open the dash app, everything is working fine. I can hover the data on the first chart and the second one will change accordingly

  2. When I change the filter in the dropdown, this error appears. Its just a warning. My dash app continues to work, the first chart it’s updated accordingly with the dropdown filter, the hover data continues to change the second chart and so on.

  3. If I change the filter in the dropdown again, the same warning shows. Matter of fact, everytime I change the filter the waring shows, but this problem dont affect the charts.

What I investigate here is that the two filters in the dropdown menu are associate with two differents dfs. One df to the month data and other to the week data (my filters).

When I click to change the filter [month to week], my second chart is still associated with the previously month data e the warning is actually telling me that the new week data that is in the dash app now don’t correspond to any data used to generate the second chart.

Pretty sure the solution is changing something in the if-else. I need to be able to tell the code “wait until I hover the data so you can generate the chart”

OK. So what you can do is use ctx (callback context) for your second callback. If the callback has been triggered by the change of the drop-down, do something. If callback has been triggered by hover, do other stuff.

If you had provided a MRE, I am pretty sure this problem would have been solved by now.

Just found the answer and it is unbelievably simple.

For future references, To fix this you just need to change

html.Div(children=[
        dcc.Graph(
            id='line_chart', figure=line_fig)

to

html.Div(children=[
        dcc.Graph(
            id='line_chart', figure={})
1 Like