2 Dropdown to upgrade a graph

Dash Python
1

I have some problems with multidropdowns.

I have 2 dropdowns with id’s: drop1, drop2
I have 1 graph with id: graph1

My callback is:

@app.callback(
  Output("graph1", "figure"),
[Input("drop1", "value"),
Input("drop2", "value")])

def update_graph(drop1, drop2):
    data[]
   
    if drop2 == "Time":
        trace = go.Scatter(x= (df.temp),
                                        y= df[drop1]
                                        line=dict(color="Red")

        data.append(trace)

The problem is, my code didnt reconize the value of drop2 :frowning:

2

Hi @Silver_DC
it would be helpful to see the dropdowns and props you set for each one of them.
is drop2 multi=True or multi=False?

Try printing drop2 inside the callback function:

def update_graph(drop1, drop2):
    data[]
    print(drop2)
    print(type(drop2))
   
    if drop2 == "Time":......
1 Like
3

Hello Silver_DC

Try to make something like this, maybe help to get the values.


import json
import dash
from dash import html, dcc
from dash.dependencies import Input, Output

app = dash.Dash(__name__)

app.layout = html.Div([


    dcc.Dropdown(
            id='dropdown-1',
            options=[
                {'label': '1', 'value': '1'},
                {'label': '2', 'value': '2'},

            ],
            value='0',
            style={"width": "50%"}
        ),
    
    html.Br(),

    dcc.Dropdown(
            id='dropdown-2',
            options=[
                {'label': '1', 'value': '1'},
                {'label': '2', 'value': '2'},

            ],
            value='0',
            style={"width": "50%"}
        ),

 

    html.Div(id='container')
])


@app.callback(Output('container', 'children'),
              Input(component_id='dropdown-1', component_property='value'),
              Input(component_id='dropdown-2', component_property='value'),

              )
def display(dropdown1, dropdown2):
    ctx = dash.callback_context

    if not ctx.triggered:
        dropdown_id = 'No Selected yet'
    else:
        dropdown_id = ctx.triggered[0]['prop_id'].split('.')[0]

    ctx_msg = json.dumps({
        'states': ctx.states,
        'triggered': ctx.triggered,
        'inputs': ctx.inputs
    }, indent=2)

    return html.Div([

        html.Table([
            html.Tr([html.Th('Dropdown 1:  '),
                     html.Td(dropdown1 or 0),
                     html.Th('Dropdown 2:  '),
                     html.Td(dropdown2 or 0),                  
                     html.Th('Dropdown Selected'),
                     html.Td(dropdown_id)])
        ]),
    html.Pre(ctx_msg)
])


if __name__ == '__main__':
    app.run_server(debug=True)
1 Like