Help with Multi=True in Drop Down

Dash Python
1

I have a working app with the code below. However, when I tried to add the multi=True function so users could select multiple parties to view at once, the app is stuck on “All Parties” and does not update to filter on the selected party.

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import pandas as pd

# Read in the data 
df = active_inactive10

# Get a list of all the parties
parties = active_inactive10['Party'].unique()

# Create the app
app = dash.Dash()

# Populate the layout with HTML and graph components
app.layout = html.Div([
    html.H2("Active v. Inactive Voters"),
    html.Div(
        [
            dcc.Dropdown(
                id="Party",
                options=[
                     {'label': 'Democratic Party', 'value': 'DEM'},
                     {'label': 'Republican Party', 'value': 'REP'},
                     {'label': 'Conservative Party', 'value': 'CON'},
                     {'label': 'Working Families Party', 'value': 'WOR'},
                     {'label': 'Independent Party', 'value': 'IND'},
                     {'label': 'Green Party', 'value': 'GRE'},
                     {'label': "Women's Equality Party", 'value': 'WEP'},
                     {'label': 'Reform Party', 'value': 'REF'},
                     {'label': 'Other', 'value': 'OTH'},
                     {'label': 'Blank', 'value': 'BLANK'}
                    ],
                multi=True,
                value='All Parties'),
#                 
        ],
        style={'width': '25%',
               'display': 'inline-block'}),
    dcc.Graph(id='funnel-graph'),
])


# Add the callbacks to support the interactive componets
@app.callback(
    dash.dependencies.Output('funnel-graph', 'figure'),
    [dash.dependencies.Input('Party', 'value')])
def update_graph(Parties):
    if Parties == "All Parties":
        df_plot = df.copy()
    else:
        df_plot = df[df['Party'] == Parties]

    trace1 = go.Bar(x=df_plot ['DISTRICT'], y=df_plot [('Active')], name='Active')
    trace2 = go.Bar(x=df_plot ['DISTRICT'], y=df_plot [('Inactive')], name='Inactive', 
                   marker=dict(color='rgb(0,0,0)'))
    

    return {
        'data': [trace1, trace2],
        'layout':
        go.Layout(
            title='{}'.format(Parties),
            barmode='stack')
    }


if __name__ == '__main__':
    app.server.run(port=8000, host='127.0.0.1')
2

Hi! First - You are selecting value which is not in dropdown’s options list. Try to include it to options list
dcc.Dropdown(
id=“Party”,
options=[
{‘label’: ‘Democratic Party’, ‘value’: ‘DEM’},
{‘label’: ‘Republican Party’, ‘value’: ‘REP’},
{‘label’: ‘Conservative Party’, ‘value’: ‘CON’},
{‘label’: ‘Working Families Party’, ‘value’: ‘WOR’},
{‘label’: ‘Independent Party’, ‘value’: ‘IND’},
{‘label’: ‘Green Party’, ‘value’: ‘GRE’},
{‘label’: “Women’s Equality Party”, ‘value’: ‘WEP’},
{‘label’: ‘Reform Party’, ‘value’: ‘REF’},
{‘label’: ‘Other’, ‘value’: ‘OTH’},
{‘label’: ‘Blank’, ‘value’: ‘BLANK’},
{‘label’: ‘All Parties’,‘value’:‘All Parties’} #like that
],
multi=True,
value=‘All Parties’)

Second. As i remember multi dropdown’s value in callback is a list of values, not a single statment. So this part of code shouldn’t work :
if Parties == “All Parties”:
df_plot = df.copy()
else:
df_plot = df[df[‘Party’] == Parties]

try this instead
if “All Parties” in Parties:
df_plot = df.copy()
else:
df_plot = df[df[‘Party’].isin(Parties)]

1 Like
3

That worked - thank you so much!

4

Thank you Roman! I had the same problem and your solution worked for me as well.
One more question please, where to look the returned value of a “multi” drop-down is a list, not a single value?

If I know where to look for things, maybe I’ll have less trouble.

Thanks again!