CODEWITHSUNDEEP
plotly-dash
peace
peace

Reputation: 389

plotly-Dash - how to create 3 filters based on dataset columns (drop down list can be multi select)

I am new to Dash, and I don't have knowledge for css and html.

I have a requirement that is to add 3 filters for the sankey chart based on dataCenter, customer and company ID columns with dash library ,type is multi selection dropdown. so I can filter the sankey chart. The default value for all the 3 filters I need are 'Select All'.

I have refer to some materials on page https://dash.plotly.com/, but due to kind of reason, I am not able to successfully make it.

This is the code for dash part, and i don't know how to add call back for these 3 filters.

app.layout = html.Div([
    dcc.Dropdown(
        id='my-multi-dataCenter-dropdown',
        options=[ {'label': i, 'value': i} for i in dataset['companyID'].unique()] + [{'label': 'Select all', 'value': 'allID'}],
        multi=True, placeholder='Please select Data Center'),
    dcc.Dropdown(
        id='my-multi-customer-dropdown',
        options=[{'label': i, 'value': i} for i in dataset['Customer'].unique()]  + [{'label': 'Select all', 'value': 'allID'}],
        multi=True, placeholder='Please select Customer'),
    
    dcc.Dropdown(
        id='my-multi-companyID-dropdown',
        options=[{'label': i, 'value': i} for i in dataset['companyID'].unique()] + [{'label': 'Select all', 'value': 'allID'}],
        multi=True, placeholder='Please select companyID'),
    
    html.Div(id='dd-output-container'),
    
    dcc.Graph(id='uxrPerfGoalSankey',figure=fig)
])
@app.callback(
    Output('dd-output-container', 'children'),
    Input('my-multi-dataCenter-dropdown', 'value'),
    Input('my-multi-customer-dropdown', 'value'),
    Input('my-multi-companyID-dropdown', 'value')
)
def update_output(value):
    return 'You have selected "{}"'.format(value)
if __name__ == '__main__':
    app.run_server(debug=True)

Upvotes: 1

Views: 1689

Answers (1)

coralvanda
coralvanda

Reputation: 6596

To add a 'select all' option, you can do something like this:

dcc.Dropdown(
    id='my-multi-companyID-dropdown',
    options=[
        {'label': i, 'value': i} for i in dataset['companyID'].unique()
    ] + [{'label': 'Select all', 'value': 'allID'],
    multi=True, placeholder='Please select companyID')

Then, in your callback, you can check for the 'allID' value, and know that means all values. You'd set a slightly different one for each callback, so you can tell them apart.

Edit: Fix for callback. You need to make sure the number of arguments the function takes matches the number of Input and State values you assign to the callback. The callback should look like this:

@app.callback(
    Output('dd-output-container', 'children'),
    Input('my-multi-dataCenter-dropdown', 'value'),
    Input('my-multi-customer-dropdown', 'value'),
    Input('my-multi-companyID-dropdown', 'value')
)
def update_output(data_value, customer_value, company_id_value):
    # function body goes here

Upvotes: 2

Related Questions