'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)


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source