Learn how to use Dash Bio for next-gen sequencing & quality control. 🧬 Register for the Oct 27 webinar.

dcc.Graph with two dropdown does not update

Hi,
I am pretty new to Dash and stuck on a plot which does not update given two conditions.

Below is my code:

site_options = [{'label': 'DASH', 'value': 'DASH'}]
flow_options = [{'label': 'Volume', 'value': 'volume'}]

app.layout = html.Div(
    [
        html.Div(
            [
                html.Div(
                    [
                        html.P(
                            'Site',
                            className="control_label"
                        ),
                        dcc.Dropdown(
                            id='dropdown',
                            options=site_options,
                            multi=False,
                            value='DASH',
                            className="dcc_control"
                        ),
                        html.P(
                            'Filter by Flow:',
                            className="control_label"
                        ),
                        dcc.Dropdown(
                            id='flow_names',
                            options=flow_options,
                            multi=False,
                            className="dcc_control"
                        )

@app.callback(Output('main_graph', 'figure'),
              [Input('dropdown', 'value'),
               Input('flow_names', 'value')])
def update_graph(dropdown_value, flow_names):
    if dropdown_value == "DASH" and flow_names == "volume" :
        dff = forecast
        dff1 = dff.groupby('date')['volume'].sum().reset_index()
        dff2 = dff.groupby('date')['new_volume'].sum().reset_index()
        trace1 = go.Scatter(y=dff1['volume'], x=dff['date'], mode='lines+markers+text', name='Forecast Volume',selectedpoints=[])
        trace2 = go.Scatter(y=dff2['new_volume'], x=dff['date'], mode='lines+markers+text', name='Forecast New Volume',
                            selectedpoints=[])
        data = [trace1,trace2]
        return {"data": data, "layout": {"xaxis": {"tickformat":"%Y-%m-%d"}}}

The console does not throw me any error, it is just the plot not updating and I am not sure why.

If I remove “and flow_names == “volume”” my code works and does the expected behaviour but I would like to have this second dropdown condition.

Same issue with nested if.

Also somehow lines+markers+text does not display the data labels of each point directly, not sure why.

Thank you very much.
Kind regards,

Hi @Entropy

Try adding value=‘volume’ to your flow_names Dropdown:

dcc.Dropdown(
    id='flow_names',
    options=flow_options,
    multi=False,
    className='dcc_control',
    value='volume'
)