Dynamic dropdowns plotly dash callback with multi true

Question

I'm pretty new to dash/plotly and I'm trying to create a dependent dropdown in dash/plotly, where the selection options in the second dropdown is dependent on the selection in the first dropdown.The first dropdown is pillar and second is manager.

What I would like to see is that if a pillar is selected the manager options will be automatically populated for those serving the pilllar only.

What I am getting with the below code is when a pillar is selected all the managers are selected not just those serving the pillar.

Thanks in advance for helping.

app = dash.Dash(__name__)

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

all = df.Pillar.unique()

all_1 = df['PRO Manager'].unique()

app.layout=html.Div([
    html.H1("PRO Project Management dashboard"),
    
       html.Div([
        html.Div([
        html.P('Pillar'),
        dcc.Dropdown(id='pillar-choice', options=[{'label':x, 'value':x} for x in all] + [{'label':'Select All' , 'value': 'all'}], value=None , multi=True),
    ],className='six columns'), 
        
        html.Div([
        html.P('Manager'),
        dcc.Dropdown(id='manager-choice', options=[], value=[], multi=True),
    ], className='six columns'),
    
    ], className='row'),
    
        html.Div([
            dcc.Graph(id='graph1', style={'display':'inline-block', 'width' :'33%'})
        
    ]),
    
])



 @app.callback(
    Output(component_id='manager-choice', component_property='options'),
    Output(component_id='manager-choice',component_property='value'),
    Input(component_id='pillar-choice', component_property='value')
    
)

def set_manager_options(choosen_pillar): 
    dff=df[df.Pillar.isin(choosen_pillar)]  
    manager_list = [{'label': c, 'value': c} for c in all_1]  
    values_selected = [x['value'] for x in manager_list]  
    return manager_list, values_selected

@app.callback(
    Output(component_id='graph1', component_property='figure'),
    Input(component_id='manager-choice',component_property='value'),
    Input(component_id='pillar-choice', component_property='value')
)

def update_graph1(manager_selected, pillar_selected):
    if ((len(manager_selected) !=0) and (len(pillar_selected) ==0)):
        dff =df[(df['PRO Manager'].isin(manager_selected))]
    
    elif ((len(manager_selected) ==0) and (len(pillar_selected) !=0)):
        dff =df[(df.Pillar.isin(pillar_selected))]
    
    elif ((manager_selected is None ) and (pillar_selected is None)):
        return dash.no_update
        
    else:
        dff =df[(df.Pillar.isin(pillar_selected)) & (df['PRO Manager'].isin(manager_selected))]
    
    fig = px.pie(data_frame=dff, names='Pillar', values='Project No', title='Number of Projects by Pillars')
    return fig
    
if __name__=='__main__':
    app.run_server(debug=False)

coralvanda · Accepted Answer · 2021-08-05 22:36:06Z

2

I'll walk through this callback line by line, and I think you'll see what needs to change.

def set_manager_options(choosen_pillar): 
    dff=df[df.Pillar==choosen_pillar]  # 1
    manager_list = [{'label': c, 'value': c} for c in all_1]  # 2
    values_selected = [x['value'] for x in manager_list]  # 3
    return manager_list, values_selected

This is what you need. dff now has the matching values
You create the list using all_1, but it should have used dff. You created it, but then never used it
This is based off the wrong list, so it also has the wrong values

answered Aug 5, 2021 at 22:36

coralvanda

6,6562 gold badges17 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sheryna Over a year ago

Got it! Can't believe I missed it. I used dff['PRO Manager'].unique() . Thanks a lot :)

Collectives™ on Stack Overflow

Dynamic dropdowns plotly dash callback with multi true

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related