CODEWITHSUNDEEP
plotlyplotly-dashplotly-python
hobbes
hobbes

Reputation: 467

Can I create multiple dropdown menus in Python Dash?

I'm currently running a dropdown menu in Python which has been working perfectly fine.

'stat_option' is loading a list of values to use, and then the callback is sending the value to the dataframe used for the y axis. So far, so good..

     dcc.Dropdown(
         id='stats_dropdown',
         options = stat_opt,
         style = {
             'width': '35%'
         },
     ),
     dcc.Graph(
         id='graph',
     ),

... app.callback ...

@app.callback(
    dash.dependencies.Output('graph', 'figure'),
    [dash.dependencies.Input('stats_dropdown', 'value')])

def update_graph(value):
    datasets = df.to_json()
    dff = px.line(df, x = 'time', y = value, color = 'host', line_group = 'host', hover_name = "host", title = 'stats').update_xaxes(categoryorder = "category ascending")
    figure = dff
    return(figure)

I'd like to create a second dropdown menu that provides a value for the x axis. I create the second dropdown menu, and refer to a list of unique dates in the 'date_opt' variable:

     dcc.Dropdown(
         id='date_dropdown',
         options = date_opt,
         style = {
             'width': '35%',
         },
     ),

But when I assign a new Input for my date_dropdown:

@app.callback(
    dash.dependencies.Output('graph', 'figure'),
    [dash.dependencies.Input('date_dropdown', 'value')],
    [dash.dependencies.Input('stats_dropdown', 'value')])

I get the following error:

dash.exceptions.IncorrectTypeException: The state argument `date_dropdown.value` 
must be of type `dash.State`.

Since this replicates the stats_dropdown, I'm guessing the error has to do with handling more than one Input? I've been searching through the plotly forums, and stackoverflow threads, but haven't had much success in finding out answers for multiple inputs, and am hoping someone with experience in dash can shed some light onto my issue, and where a good place would be to find some answers (an example would be nice too).

Upvotes: 0

Views: 5013

Answers (1)

Philipp
Philipp

Reputation: 1391

Dash callbacks take three parameters (the third is optional). The first parameter is a list of dash.dependencies.Output, the second parameter is a list of dash.dependencies.Input and the third parameter is a list of dash.dependencies.State. Side note: If you only have one Output you can pass it without putting it in a list. This does however not work for Inputs or States.

This means you have two choices here, you either have your stats dropdown as a State (1) which means that it won't trigger the callback on change or as an Input and then add it to the input list (2) (and it will trigger the callback on change).

(1)
@app.callback(
    dash.dependencies.Output('graph', 'figure'),
    [dash.dependencies.Input('date_dropdown', 'value')],
    [dash.dependencies.State('stats_dropdown', 'value')])

(2)
@app.callback(
    dash.dependencies.Output('graph', 'figure'),
    [dash.dependencies.Input('date_dropdown', 'value'),
     dash.dependencies.Input('stats_dropdown', 'value')])

Your error came from the fact that you passed an dash.dependencies.Input as the third parameter while they can only be passed as the second.

Upvotes: 2

Related Questions