CODEWITHSUNDEEP
pythonplotlyplotly-dashdashboardplotly-python
haroldchoi
haroldchoi

Reputation: 53

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

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.

enter image description here

Dash look like this. enter image description here

enter image description here

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)

Upvotes: 2

Views: 1560

Answers (1)

bas
bas

Reputation: 15722

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'].

Upvotes: 1

Related Questions