How can i select multiple options to pick from Dropdown as a group?

Dash Python
1

Hello guys, i guess i need some help. Is there some option to include like uniting ma picks into a groups?
I created a sample dataset, with indices from 0 to 20. And i want to choose indices from 1 to 5 for example. Of course i can just pick every option, but it will take some time. I want some option in dropdown menu (or maybe a button or something different, i don’t know) so i can press it one click and then all option from 1 to 5 would be choosen (and unchoosen on the second click). And also to have multiple these types of buttons, for example, from 1 to 5, from 3 to 10, from 10 to 15 etc., i hope you understand.
So, it there something what i can use to add this option?

import dash
from dash import dcc
from dash import html
from dash.dependencies import Output, Input
import plotly.express as px
import pandas as pd
import numpy as np

ds=pd.DataFrame(data=(np.random.randn(10,20)))
ds.iloc[:, 0]=np.arange(0,10)

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Dropdown(id='select',
                 multi=True,
                 options=[{'label': i, 'value': i} for i in ds.columns.unique()],
                 searchable=True
                 ),
    html.Div([
        dcc.Graph(id='graph_a', figure={}),
        dcc.Graph(id='graph_b', figure={})
    ])
])


@app.callback(Output('graph_a', 'figure'),
              Input('select', 'value'))

def update_graph_a(val):
    fig = px.line(ds,
                  x=0,
                  y=val)
    return fig


@app.callback(Output('graph_b', 'figure'),
              Input('select', 'value'))

def update_graph_b(val):
    fig = px.bar(ds,
                  x=0,
                  y=val)
    return fig

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

Dash-bootstrap-components (https://dash-bootstrap-components.opensource.faculty.ai/docs/) has a few options that may work for you. I modified your code to show the Accordion component. This may inspire something that works better for you.

import dash
from dash import dcc
from dash import html
from dash.dependencies import Output, Input
import plotly.express as px
import pandas as pd
import numpy as np
import dash_bootstrap_components as dbc

ds=pd.DataFrame(data=(np.random.randn(10,20)))
ds.iloc[:, 0]=np.arange(0,10)

# Added external_stylesheets; meta_tags if you're considering mobile devices
app = dash.Dash(__name__,
                external_stylesheets=[dbc.themes.BOOTSTRAP],
                meta_tags=[
                        {'name': 'viewport', 'content': 'width=device-width, initial-scale=1.0'}
                    ]
                )

app.layout = html.Div([
    dbc.Accordion(
        [
            dbc.AccordionItem(
                [
                    dcc.Dropdown(id='select',
                                 multi=True,
                                 options=[{'label': i, 'value': i} for i in ds.columns.unique()],
                                 searchable=True
                                 ),
                ],
                title="Individual Options",
            ),
            dbc.AccordionItem(
                [
                    dcc.Dropdown(id='select2',
                                 options=[{'label': 'Options 1-5', 'value': 15},
                                          {'label': 'Options 6-10', 'value': 610}],
                                 searchable=True
                                 ),
                ],
                title="Range of Options",
            ),
        ],
    ),
    html.Div([
        dcc.Graph(id='graph_a', figure={}),
        dcc.Graph(id='graph_b', figure={})
    ]),
])

@app.callback(Output('graph_a', 'figure'),
              Input('select', 'value'))
def update_graph_a(val):
    fig = px.line(ds,
                  x=0,
                  y=val)
    return fig


@app.callback(Output('graph_b', 'figure'),
              Input('select', 'value'))
def update_graph_b(val):
    fig = px.bar(ds,
                  x=0,
                  y=val)
    return fig


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

Thanks for the help, i’ll try to work with it.