4 drop-down callback chain, multi-select not working

Dash Python
1

Hi there! I have got one drop-down which values are updated based on the drop-down above. However I would like the histogram to display multiple values, so for instance selecting 0-19 and 20-39 displays the distribution of those ages 0-39

multi dropdown
multi dropdown1861×648 57.2 KB 

app = dash.Dash()

colors = {
    'background': '#111111',
    'text': '#7FDBFF'
}

features = region_mirco_census.columns

app.layout = html.Div([
    
    html.Div([ html.Label('Select Characteristic:'),
            dcc.Dropdown(
                id='slct_xaxis',
                options=[{'label': i, 'value': i} for i in features],
                value='age2',
                multi=False)], style={'width': '48%', 'display': 'inline-block'}),
    
    
    html.Div([
        html.Div([
            
        html.Label('Select Second Characteristic:'),
            dcc.Dropdown(id = "slct_xaxis2",
							multi = False,
							searchable = True,
							value = "ethnicityew_names",
							options=[{'label': i, 'value': i} for i in features],
							className = "dcc_compon"),
        
    ]),
        html.Div([

        html.Label('Select variable:'),
        dcc.Dropdown(
							id = "slct_v",
							multi = True,
							searchable = True,
							options = [],
							className = "dcc_compon")
            ]),
            ], style={'width': '48%', 'display': 'inline-block'}),
    
   html.Div([ html.Label('Select Region:'),
        dcc.Dropdown(
            id = 'select_region',
            options = [{
                     'label' : i, 
                     'value' : i
             } for i in region_mirco_census['region_names'].unique()],
            value = 'South East')
            ]),
          
          

    


 
    dcc.Graph(id='feature-graphic')
], style={'padding':10})

@app.callback(
  Output(
    component_id = "slct_v",
    component_property = "options"
  ),
  Output(
    component_id = "slct_v",
    component_property = "value"
  ),
  Input(
    component_id = "slct_xaxis2",
    component_property = "value"
  )
)
def update_variable(slct_xaxis2):
  # Build list of variables
  list_of_variables = [{"label": i, "value": i} for i in region_mirco_census[slct_xaxis2].unique()]
  # Return list and value
  return list_of_variables, list_of_variables[0]["value"]

@app.callback(
    Output('feature-graphic', 'figure'),
    [Input('slct_xaxis', 'value'),
     Input('select_region', 'value'),
     Input('slct_xaxis2','value'),
     Input('slct_v', 'value')])
def update_graph(slct_xaxis, select_region, slct_xaxis2, slct_v):

    region_mirco_census_filtered_test = region_mirco_census.loc[(region_mirco_census['region_names'] == select_region)]
    region_mirco_census_filtered_uk = region_mirco_census[region_mirco_census[slct_xaxis2] ==  slct_v]
    
    fig = go.Figure()

    fig.add_trace(
        go.Histogram(
            x=region_mirco_census_filtered_test[slct_xaxis], histnorm='percent', 
            opacity=0.8, name="Region" 
        )
    )

    fig.add_trace(
            go.Histogram(
                x=region_mirco_census_filtered_uk[slct_xaxis], histnorm='percent',  marker=dict(color='rgba(0,0,0,0)', line=dict(width=2, color='red')),
                opacity=0.8, name="UK average" 
            )
    )
    fig.update_layout(barmode='overlay')
    fig.update_xaxes(categoryorder='category ascending')
    fig.update_yaxes(range=[0, 100])

    #fig.show()
    return fig

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

Hi,

If slct_v is a list of values, then I think the issue lies in this line:

region_mirco_census_filtered_uk = region_mirco_census[region_mirco_census[slct_xaxis2] ==  slct_v]

You would have to replace it by something like:

region_mirco_census_filtered_uk = region_mirco_census[region_mirco_census[slct_xaxis2].isin(slct_v)]
1 Like