Can I create multiple dropdown menus in Python Dash?

Question

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).

To clarify even further, my goal is to allow for a date range query, so might possibly need to define two dropdown menus to create a start:end date range, unless there are other range options available in dash worth looking at. — hobbes
– hobbes, Commented Jan 22, 2020 at 19:52

Philipp · Accepted Answer · 2020-01-23 10:32:17Z

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.

Collectives™ on Stack Overflow

Can I create multiple dropdown menus in Python Dash?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related