Update the graph only to show a selected bar

Dash Python
1

Hi , i would like to know if is possible to add a functionality that when a user click on the bar for example everything updates according with that click. See my code below and a picture of my file

mgr_options = df['SA3'].unique()

app = dash.Dash(__name__)

app.layout = html.Div([
    html.H2("Accidents in Canberra - Please select one SA3 "),
    html.Div(
        [![IMG_5027|666x500](upload://tzhfiQHc2APHYtsriVSnIVEqyPW.jpeg) 
            dcc.Dropdown(
                id="SA3",
                options=[{
                    'label': i,
                    'value': i
                } for i in mgr_options],
                value='All Suburbs'),
        ],
        style={'width': '25%',
               'display': 'inline-block'}),
    dcc.Graph(id='funnel-graph'),
])

# Add the callbacks to support the interactive components
@app.callback(
    dash.dependencies.Output('funnel-graph', 'figure'),
    [dash.dependencies.Input('SA3', 'value')])

def update_SA2_using_SA3_graph(SA3):
    if SA3 == "All Suburbs":
        df_plot = df.copy()
    else:
        df_plot = df[df['SA3'] == SA3]

    pv = pd.pivot_table(
        df_plot,
        index=['Suburb'],
        columns=["Type"],
        values=['Quantity'],
        aggfunc=sum,
        fill_value=0)

    trace1 = go.Bar(x=pv.index, y=pv[('Quantity', 'Good dry surface')], name='Good dry surface')
    trace2 = go.Bar(x=pv.index, y=pv[('Quantity', 'Loose surface')], name='Loose surface')
    trace3 = go.Bar(x=pv.index, y=pv[('Quantity', 'Muddy or oily surface')], name='Muddy or oily surface')
    trace4 = go.Bar(x=pv.index, y=pv[('Quantity', 'Snow or ice')], name='Snow or ice')
    trace5 = go.Bar(x=pv.index, y=pv[('Quantity', 'Unknown')], name='Unknown')
    trace6 = go.Bar(x=pv.index, y=pv[('Quantity', 'Wet surface')], name='Wet surface')

    return {
        'data': [trace1, trace2, trace3, trace4, trace5,trace6],
        'layout':
        go.Layout(
            title='Car accidents by road condition type for {}'.format(SA3),
            barmode='stack')
    }



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

Hi,

I think you can achieve this by using the State dash dependency.

Add a

html.Button(id='submit_button, children=['Submit'])

In your layout, and then use this in your callback:

 @app.callback(
    dash.dependencies.Output('funnel-graph', 'figure'),
    [dash.dependencies.Input('submit_button', 'n_clicks')],
    [dash.dependencies.State('SA3', 'value')])
def update_SA2_using_SA3_graph(clicks, SA3):
#### etc

This will take the input from SA3 in the background, and when the user clicks the submit button, fire the callback.

This can be done with any component listed as an Input with others as a State, a button is just a good example.

Hope this helps!

1 Like