Plotly Dash Scatterplot with one dropdown and multiple selector (all)

Question

I am trying to create a scatterplot with one dropdown selector and hope that the selector has the ability to chose multiple capsules and the default set at all capsules.

I understand the multi have to be first set to True, and the callback have to be adjusted to update the graph for each subsequent change or add in of capsule. I am having trouble finding a suitable way to change the code such that I can chose multiple capsule and even the whole dataset of capsules. I have also created a list of the unique capsule ID and use that as the dropdown so that is working.

Data looks like this.

Dash plotly looks this.

Code I run on pycharm.

import pandas as pd
import plotly.express as px  # (version 4.7.0)
import plotly.graph_objects as go

import dash  # (version 1.12.0) pip install dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

app = dash.Dash(__name__)

df = pd.read_csv("tcd vs rh.csv")
print(df)

capsuleID = df['Capsule_ID'].unique()
print(capsuleID)

capsuleID_names = list(capsuleID)
print(capsuleID_names)

app.layout = html.Div([

    html.H1("Web Application Dashboards with Dash", style={'text-align': 'center'}),

    dcc.Dropdown(id="capsule_select",
                 options=[{"label": capsuleID_names, "value": capsuleID_names} for capsuleID_names in capsuleID_names],
                 multi=True,
                 value=2100015,
                 style={'width': "40%"}
                 ),

    html.Div([
        dcc.Graph(id="the_graph")
    ]),

])


# -----------------------------------------------------------
@app.callback(
    Output('the_graph', 'figure'),
    [Input('capsule_select', 'value')]
)
def update_graph(capsule_chosen):
    dff = df[(df['Capsule_ID'] == capsule_chosen)]  # filter all rows where capsule ID is the capsule ID selected

    scatterplot = px.scatter(
    data_frame=dff,
    x="tcd",
    y="humidity",
              )

    scatterplot.update_traces(textposition='top center')

    return scatterplot


# ------------------------------------------------------------------------------

if __name__ == '__main__':
    app.run_server(debug=True)

bas · Accepted Answer · 2021-08-30 05:10:39Z

1

First I would change the default value you've set for the dropdown from 2100015 to [2100015] when using multi=True.

This way we can rely on the fact that the value property will always be a list.

Your current filter logic in your callback only works for single values:

dff = df[(df["Capsule_ID"] == capsule_chosen)]

Instead you could use pandas.Series.isin:

dff = df[(df["Capsule_ID"].isin(capsules_chosen))]

Note: in the example I've given above I've changed the callback parameter from capsule_chosen to capsules_chosen to better reflect the fact that this variable holds a list of values.

Update

If you want to start off with all values selected you can simply set the initial dropdown value to your Capsule_ID column:

value=df["Capsule_ID"]

For creating a 'select all' functionality you can create a button or other triggering element and add this element to the layout:

html.Button("select all", id="select-all", n_clicks=0),

and create a callback like this:

@app.callback(Output("capsule_select", "value"), Input("select-all", "n_clicks"))
def select_all(n_clicks):
    return df["Capsule_ID"]

edited Aug 30, 2021 at 5:10

answered Aug 29, 2021 at 14:32

bas

15.2k7 gold badges27 silver badges70 bronze badges

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

2 Comments

haroldchoi Over a year ago

Hi Bas, thank you for the help! It works! I was wondering if there is a way to start with selecting all the capsules first. Or even putting the option of "select all". Thank you :)

bas Over a year ago

@haroldchoi See my updated answer. Btw in addition to accepting answers you can now also upvote answers as you've passed the threshold of 15 reputation points.

Collectives™ on Stack Overflow

Plotly Dash Scatterplot with one dropdown and multiple selector (all)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related