Multiple dropdowns problem

[SHRees]

Hi all, I am trying to create a histogram where the x-axis changes depending on the column selected in the dataframe via a dropdown. This will be accompanied by a second dropdown that filters the column based on another variable (e.g. region). However, it seems to be unable to update the graph.

features = region_mirco_census.columns

app.layout = html.Div([
    html.Div([
        html.Div([
            dcc.Dropdown(
                id='slct_xaxis',
                options=[{'label': i, 'value': i} for i in features],
                value='ethnicityew_names',
                multi=True
            )
        ],
        style={'width': '48%', 'display': 'inline-block'}),
 
        html.Div([
            dcc.Dropdown(id="slct_location",
                 options=[{'label': i, 'value': i} for i in region_mirco_census['region_names'].unique()],
                    value='Inner London',
                )
        ],style={'width': '48%', 'float': 'right', 'display': 'inline-block'})
    ]),
 
    dcc.Graph(id='feature-graphic')
], style={'padding':10})

@app.callback(
    Output('feature-graphic', 'figure'),
    [Input('slct_xaxis', 'value'),
     Input('slct_location', 'value')])
def update_graph(slct_xaxis, slct_location):
    return {
        'data': [go.Histogram(
            x=region_mirco_census[slct_xaxis]
        )],
        'layout': go.Layout(
            xaxis={'title': 'xaxis_name'},
            yaxis={'title': 'yaxis_name'},
            margin={'l': 40, 'b': 40, 't': 10, 'r': 0},
            hovermode='closest'
        )
    }

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

I have also tried a stripped down version with one dropdown to update a figure, with a similar result

features = region_mirco_census.columns

app.layout = html.Div([
    html.Div([
        html.Div([
            dcc.Dropdown(
                id='slct_xaxis',
                options=[{'label': i, 'value': i} for i in features],
                value='ethnicityew_names',
                multi=True)
        
    ]),
 
    dcc.Graph(id='feature-graphic')
], style={'padding':10})])

@app.callback(
    Output('feature-graphic', 'figure'),
    Input('slct_xaxis', 'value'))

def update_graph(slct_xaxis):

    fig = px.histogram(region_mirco_census, x=region_mirco_census[slct_xaxis])

    fig.update_layout(hovermode='closest')

    fig.update_xaxes(title='x')

    fig.update_yaxes(title='y')

    return fig

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

[jlfsjunior]

Hi,

Please make sure to run your application with debug=True, so it will have more informative errors shown in the browser.

In your second example, the problem seems to be that you are using x=region_mirco_census[‘slct_xaxis’] with quotes, while this should be a variable. But it would be good to know which error appear in the server and client side.

Besides, in both examples you have multi=True, which makes slct_xaxis be a list in the callback (even if a single value is selected). This can break your plots up because you would be passing potentially a pd.DataFrame in places where plotly expects a pd.Series.

[SHRees]

Hi!

Thank you so much for your reply, really appreciate you taking the time to look at it!

I have tried putting debug=True beforehand but kept getting the in browser error of “This site can’t be reached 127.0.0.1 refused to connect.” until I switch it to False. I have changed multi = False and change slct_xaxis to a variable. But still get this:

features = region_mirco_census.columns

app.layout = html.Div([
    html.Div([
        html.Div([
            dcc.Dropdown(
                id='slct_xaxis',
                options=[{'label': i, 'value': i} for i in features],
                value='ethnicityew_names',
                multi=False)
        
    ]),
 
    dcc.Graph(id='feature-graphic')
], style={'padding':10})])

@app.callback(
    Output('feature-graphic', 'figure'),
    Input('slct_xaxis', 'value'))
def update_graph(slct_xaxis):

    fig = px.histogram(region_mirco_census, x=region_mirco_census[slct_xaxis])

    fig.update_layout(hovermode='closest')

    fig.update_xaxes(title='x')

    fig.update_yaxes(title='y')

    return fig

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