Python Plotly Dash dropdown Adding a "select all" for scatterplot

Question

I would like to add a select all for my dropdown, and make it the default when the app opens up, with the ability to then one by one remove capsule and also to unselect the select all button and select a group of capsule. I managed to find several ways that other people have use the select all option but none seems to work for my situation. Thank you!

Data looks this this.

Dash look like this.

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, State
from dash.exceptions import PreventUpdate

app = dash.Dash(__name__)
server = app.server

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

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

capsuleID_names = list(capsuleID)
print(capsuleID_names)

capsuleID_names_1 = [{'label': k, 'value': k } for k in sorted(capsuleID)]
capsuleID_names_2 = [{'label': '(Select All)', 'value': 'All'}]
capsuleID_names_all = capsuleID_names_1 + capsuleID_names_2

app.layout = html.Div([

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

    dcc.Dropdown(id="capsule_select",
                 options=capsuleID_names_all,
                 optionHeight=25,
                 multi=True,
                 searchable=True,
                 placeholder='Please select...',
                 clearable=True,
                 value=[''],
                 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):
    if capsule_chosen == 'all_values':
        dff = df['Capsule_ID']
    else:
        dff = df[df['Capsule_ID'].isin(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 06:03:38Z

1

If by default you want to select everything from df['Capsule_ID'] you can simply pass it to the value of your dropdown.

Then you can change your callback to something like this for the 'select all' functionality:

@app.callback(
    Output("the_graph", "figure"),
    Output("capsule_select", "value"),
    Input("capsule_select", "value"),
)
def update_graph(capsules_chosen):
    dropdown_values = capsules_chosen

    if "All" in capsules_chosen:
        dropdown_values = df["Capsule_ID"]
        dff = df
    else:
        dff = df[df["Capsule_ID"].isin(capsules_chosen)]

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

    scatterplot.update_traces(textposition="top center")

    return scatterplot, dropdown_values

In addition to your check not working with the default dropdown value, you were doing this:

dff = df['Capsule_ID']

which means you were setting dff to a single column. This is not what want since 'tcd' and 'humidity' columns don't exist on df['Capsule_ID'].

edited Aug 30, 2021 at 6:03

answered Aug 30, 2021 at 5:44

bas

15.2k7 gold badges27 silver badges70 bronze badges

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

1 Comment

haroldchoi Over a year ago

Thank you Bas! For the dropdown_values = df['Capsule_ID'], changing it to dropdown_values = capsuleID_names helped solved the issue of selecting all the duplicated df capsule_ID (almost 61k observations) as capsuleID_names is the unique list (140+ observations).

Collectives™ on Stack Overflow

Python Plotly Dash dropdown Adding a "select all" for scatterplot

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related