Dash:graph_update with multiple drop down selection condition

Question

Hello I am very new to dash and I am trying to render a graph whose outpuut would depend on the two drop down selection on the layput I have written the below graph_update logic, however somehow it is not workig.

app.layout = html.Div([
    html.Div([
        html.H1('Stock Tickers'),
        dcc.Dropdown(
            id='my-dropdown',
            options=[
                {'label': 'A', 'value': 'A'},
                {'label': 'B', 'value': 'B'},
                {'label': 'C', 'value': 'C'}
            ],
            value='A'
        )
    ],
        style={'width': '20%', 'display': 'inline-block'}
    ),
    dcc.Dropdown(
        id='my-dropdown1',
        options=[
            {'label': '250,000', 'value': '250000'},
            {'label': '500,000', 'value': '500000'},
            {'label': '750,000', 'value': '750000'},
            {'label': '1,000,000', 'value': '1000000'}
        ],
        value='250000'
    ),
    dcc.Graph(id='my-graph')
], className="container")

@app.callback(Output('my-graph', 'figure'),
              [Input('my-dropdown', 'value'), Input('my-dropdown1', 'value')])

 def update_graph(selected_dropdown_value, selected_imp_value):
     dff = df[(df['Demo'] == selected_dropdown_value) & (df['Imp_cap'] == selected_impresession_value)]
     return {
         'data': [{
             'x': dff.Imp
             'y': dff.user,
             'line': {
                 'width': 3,
                 'shape': 'spline'
             }
         }],
         'layout': {
             'margin': {
                 'l': 30,
                 'r': 20,
                 'b': 30,
                 't': 20
             }
         }
     }

I was hoping if someone can please help me to resolve the issue

Thanks a lot in advance !!

This is very difficult to do without an example dataframe to work with. However, you have several syntax errors you can correct to start off. You need a comma after 'x': dff.Imp, and you need to change selected_impresession_value to selected_imp_value, because that's how you defined the parameter for the function. If you can edit your post to include an example df, I'll try to help more! — coralvanda
– coralvanda, Commented Mar 24, 2019 at 15:12
Hello coralvanda, Thanks for your response. really appreciate it. I was managed to do it. I am not sure if it is the best way to do it. Any thoughts ?? — Analytics_TM
– Analytics_TM, Commented Mar 26, 2019 at 4:24

Analytics_TM · Accepted Answer · 2019-03-26 04:23:10Z

This is how we managed to do it. It was not something exceptionally genius, just the way of writing it.

def update_graph(n_clicks, input1, input2, input3, input4):
    dff = df[df['Demo'] == input1]
    df1 = dff[dff['Month'] == input2]
    df2 = df1[df1['Imp'] == input3]
    df3 = df2[df2['imp_cap'] == input4]
    if n_clicks < 1:
        return []
    else:
        return {
            'data': [{
                'x': df3.Variable2,
                'y': df3.Variable1,
                'line': {
                    'width': 3,
                    'shape': 'spline'
                }
            }],
            'layout': dict(
                # 'margin': {
                #     'l': 30,
                #     'r': 20,
                #     'b': 30,
                #     't': 50
                # },
                title='title',
                xaxis=dict(title='x-title'),
                yaxis=dict(title='y-title'),
                annotations=[make_annotation_item(x=df3['Variable1'].iloc[-1], y=df3['Variable2'].iloc[-1])]
            )
        }

Collectives™ on Stack Overflow

Dash:graph_update with multiple drop down selection condition

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