Callbacks: return a go.Figure?

Dash Python
1

Hi,
Just wondering if there is an easy way to return a go.Figure object from a callback.

Its just I’m trying to convert a fairly static layout to one that uses callbacks.

The original layout worked like this:

            dbc.Row(
                 [
                     dbc.Col(dcc.Graph(figure=myfigs.get_graph1(df) )),
                 ]
             ),

And in that get_graph1 function I was doing:

def get_graph1(df):
fig_Q45 = go.Figure()
    
    fig_Q45.add_trace(go.Indicator(
        mode = "gauge+number",
        value = df['Q45_1'].mean(skipna=True),
        domain = {'x': [0, 0.25], 'y': [0, 0.25]},
        gauge = {
            'axis': {'range': [None, 10]},
            'bar': {'color': "gold"},
        },
        number = {'valueformat': ".1f" },
        title = {'text': "Social Distancing"}),
                
                )
    fig_Q45.add_trace(go.Indicator(
        mode = "gauge+number",
        value = df['Q45_2'].mean(skipna=True),
        domain = {'x': [0.5, 0.75], 'y': [0, 0.25]},
        gauge = {
            'axis': {'range': [None, 10]},
            'bar': {'color': "gold"},
        },
        number = {'valueformat': ".1f" },
        title = {'text': "Isolation"}),
                
                )
    
    fig_Q45.update_layout(  # GET RID OF WASTE SPACE ON TOP OF GAUGES
            margin={'t': 0},
        )
   return fig_Q45

So, now I’m trying to make this chart responsive to an input
So I have the layout changed to:

            dbc.Row(
                 [
                     dbc.Col(dcc.Graph(id='graph1')),
                 ]
             ),

and I have a callback written as follows:

@dash_app.callback(
    Output('graph1', 'figure'),
    [Input(component_id='my-id', component_property='value')]
)
def update_graph1(input_value):
    fig_Q45 = go.Figure()
    
    fig_Q45.add_trace(go.Indicator(
        mode = "gauge+number",
        value = df_wave1['Q45_1'].mean(skipna=True),
        domain = {'x': [0, 0.25], 'y': [0, 0.25]},
        gauge = {
            'axis': {'range': [None, 10]},
            'bar': {'color': "gold"},
        },
        number = {'valueformat': ".1f" },
        title = {'text': "Social Distancing"}),
                
                )
    fig_Q45.add_trace(go.Indicator(
        mode = "gauge+number",
        value = df_wave1['Q45_2'].mean(skipna=True),
        domain = {'x': [0.5, 0.75], 'y': [0, 0.25]},
        gauge = {
            'axis': {'range': [None, 10]},
            'bar': {'color': "gold"},
        },
        number = {'valueformat': ".1f" },
        title = {'text': "Isolation"}),
                
                )
    fig_Q45.add_trace(go.Indicator(
        mode = "gauge+number",
        value = df_wave1['Q45_3'].mean(skipna=True),
        domain = {'x': [0.5, 0.75], 'y': [0.5, 0.75]},
        gauge = {
            'axis': {'range': [None, 10]},
            'bar': {'color': "gold"},
        },
        number = {'valueformat': ".1f" },
        title = {'text': "Leisure/Travel"}),           
        )

    fig_Q45.add_trace(go.Indicator(
        mode = "gauge+number",
        value = df_wave1['Q45_4'].mean(skipna=True),
        domain = {'x': [0, 0.25], 'y': [0.5, 0.75]},
        gauge = {
            'axis': {'range': [None, 10]},
            'bar': {'color': "gold"},
        },
        number = {'valueformat': ".1f" },
        title = {'text': "Shopping"}),           
        )
    fig_Q45.update_layout(  # GET RID OF WASTE SPACE ON TOP OF GAUGES
            margin={'t': 0},
        )
    return fig_Q45.to_json()

But I’m just getting a blank graph…
image
I see that the normal way of doing things with callbacks is to return a json construct… but I’m just hoping I don’t have to go back and rewrite all my code again to get it into that shape.

Am I wasting my time this way?
Thanks

2

Sigh, ok, have to answer this one myself because I am just a but dumb.

I thought it wasn’t working to return a plain go.Figure object.

return fig_Q45

But it does.

I don’t need the .to_json() bit at all…

Sorry to waste anyones time.
Please delete this thread in case it might lead others astray.
Thanks

3

Can you post more of your code? I tried to do something similar to what you have above and now my dropdown is not working and my figure is blank and my table is not rendering.

4

Hi, I tried the same and mine is not working. It gives a callback error updating the figure. Any ideas??

5

Returning fig in the callback should work, Dash will take care of transforming it in a dictionary. So you probably have another error… Could you share what you tried, perhaps in a new thread (this one is a few years old already)? Thanks

6

Hi, Thanks for the reply. I created a new thread in Callback error updating image
Thank You