Hi, I am somewhat new to Dash and I was wondering if someone can help out. I am currently trying to build a dashboard and I have been struggling for past 4 hours with how to do callbacks where you can do a dropdown where you can have multiple selection.
I basically want to plot in an overlayed bar graph the data stored in a panda dataframe. Here is what the code looks like.
I pull the data from a local server so ignore this
df = pd.read_html()
app.layout = html.Div([
dcc.Graph(id=‘id-graph’),
dcc.Dropdown(id=‘id-dropdown’,options = [{‘label’:i} for i in df[“Machine”].values],
multi=True, value=)])
##For every value, I will have to find the corresponding info in the table and return it for plot
@app.callback(
dash.dependencies.Output(‘id-graph’, ‘figure’),
[dash.dependencies.Input(‘id-dropdown’, ‘value’)])
def update_graph(values):
# prepare figure_a from value
if values == :
values = df[“Value”].values[0]
for val in values:
df_plot = df[df[‘Value’] == val]
## Basically here, I want to get the values that are selected in the dropdown
## Add them to a trace where I plot the bars, and return the figure containing them
if name == ‘main’:
app.run_server(debug = True)
Thanks for the help in advance, I did all the user guide and still couldn’t come across something that solved my issue
The closest thing I can think of is a dropdown with multi=True. You still have to select one element at a time from the dropdown, but you can select multiple values and they’ll appear in the dropdown field as selected (and with a ‘x’ to delete them if you need to). You can check the section on ‘Multi-Value Dropdown’ here:
I do have multi = True in the dcc.Dropdown. The issue is, I don’t know how to deal with it in callback. Because once someone selects multiple, how do I display the multiple overlayed graphs? Its that part that I am having a problem with
I think you’d have to alter this part to accommodate multiple plots.
i think instead of having a for loop for it, you can pass the “val” as a parameter (e.g. color) and pass one df without the for loop
To extend this scenario - how can we configure dropdown to deal with ‘No selections’ at all. Say if a user chooses to have everything displayed rather than just a subset as specified by the dropdown, how can dcc.Dropdown be configured to deal with [] or ‘Select All’ scenario?
@adamschroeder Thank you! Yes that’s eventually what I ended up doing. For some reason, I thought I would see it in the documentation and I even though it said it was a list, I am getting an error in one of my functions where I am passing the variable assigned to the list (returned by the multi drop down) when I am trying to use append() in that function… I will continue to investigate that, but it was throwing me off for sure. Thanks again!
What I did:
set the dataframe to the full record set at start of callback. Then filter the data frame on the dropdown selections within if bool(dropdown value) clauses.
Note ‘make_map’ is a function to draw the figure as specified elsewhere.
@app.callback(
Output('map', 'figure'),
[Input('dropdown-column_name', 'value') ])
def update_graph(column_name_values):
df = full_dataframe
if bool(column_name_values): #If nothing is selected, this is falsy so no filtering
df = df[df['column_name'].isin(column_name_values)]
return make_map(df)
