Dash failed to update graph call back

Dash Python
1

Hi All!
I am trying to create a dash app with multiple call back functions, one of the function I want to build is updating the main component when clicked on the existing graph and a separate submit button to go back to original component. The issue is when added the component update function (below in the code @app.callback(dash.dependencies.Output(‘content’, ‘children’)), dash just gave me empty figure and not updating graph through my call back function (below in the code @app.callback(Output(“graph”, “figure”)). Below is the sample code, anyone can help me with this ? really appreciated !

###########################Filter groups###########################
controls = dbc.Col(
    [   dbc.Card([
        dcc.Store(id='session',
                  data = sample_data.to_dict("records")),
        dcc.Store(id='barclick',data = []),
        html.Button(id='submit-button', type='submit', children='>> Go back to Original',
                    style={'textAlign': 'left','fontSize': "12px","font-family": "'Poppins'","border": 0,"border-color": "transparent","box-shadow": None}),
                 ],style={'backgroundColor':'#f3f3f3ff','color':'black', 'font-family':'Poppins',"border": 0}),
    ]
)
sidebar = html.Div(
    [
        html.H2('FILTERS', style={'fontSize': "20px",'textAlign': 'center','backgroundColor':'f3f3f3ff','color':'black',"font-family": "'Poppins'"}),
        html.Hr(),
        controls
    ],
    style=SIDEBAR_STYLE,
)
####################### Original Content #######################
content = html.Div(id='content',
    children=[
        dcc.Graph(id="graph", figure={}, clear_on_unhover=True,
                  style={'textAlign': 'center',"font-family": "'Poppins'"},),
        dcc.Tooltip(id="graph-tooltip"),
        html.Pre(id='data'),
    ],
    style=GRAPH_STYLE
)
########################### Clicked to New Content #######################
new_content = html.Div(id='new_content',
    children=[   
        html.Div(id="sample",),
    ],
    style=GRAPH_STYLE
)

tabs = html.Div(
    [
        dcc.Tabs(id="tabs-example", value='tab-1-example', children=[
                        dcc.Tab(id="tab-1", label='Dash App', value='tab-1-example',
                                style={'fontSize': "20px",'textAlign': 'center','backgroundColor':'#f3f3f3ff','color':'black',"font-family": "'Poppins'",'padding':0,'line-height': '3vh'},
                                selected_style={'padding': 0,'line-height': '3vh','fontSize': "20px","font-family": "'Poppins'",'backgroundColor':'#1e3f4dff','color':'white'},
                               ),
                    ]),
                        html.Div(id='tabs-content-example',
                                 children = content)
    ],
    style=CONTENT_STYLE
)
##########################################Dash App##################################################
external_stylesheets = [
    "https://fonts.googleapis.com/css?family=Poppins=swap",
    dbc.themes.LUMEN
]
app = JupyterDash(__name__,external_stylesheets=external_stylesheets)
app.css.config.serve_locally = True
app.layout = html.Div([sidebar,tabs])

# update tab content
@app.callback(dash.dependencies.Output('tabs-content-example', 'children'),
             [dash.dependencies.Input('tabs-example', 'value')])
def render_content(tab):
    if tab == 'tab-1-example':
        return content
    else:
        raise PreventUpdate
    
## update graph
@app.callback(
    Output("graph", "figure"),
    [Input("session", "data")],
)
def update_charts(filtered_data):
    filtered_data=pd.DataFrame(filtered_data)
    if filtered_data.empty:
        return {}
    else:
        fig=px.histogram(filtered_data,x='x',histnorm='probability',range_x=[0,1],)
        return fig
    
# click bar go to new content and reset button nclick to 0
@app.callback(dash.dependencies.Output('content', 'children'),
              [dash.dependencies.Output('submit-button', 'n_clicks')],
              [dash.dependencies.Input('barclick','data')],
              [dash.dependencies.Input('submit-button', 'n_clicks')],
             )
def update_content(clickData,clicks):
    if clickData!=[]:
        if clicks is None:
            return new_content,0
        elif clicks>0:
            return content,0
        else:
            return new_content,0
    else:
        return content,0

if __name__ == '__main__':
    app.run_server(port=port,debug=True)
2

Hi @daisyyayueyue ,
I see that this is your callback that returns a histogram to your Graph component in the layout.
The data property of the dcc.Store component (session) is what triggers the callback. But at what point are you storing data? Where is this data coming from?

## update graph
@app.callback(
    Output("graph", "figure"),
    [Input("session", "data")],
)
def update_charts(filtered_data):
    filtered_data=pd.DataFrame(filtered_data)
    if filtered_data.empty:
        return {}
    else:
        fig=px.histogram(filtered_data,x='x',histnorm='probability',range_x=[0,1],)
        return fig