✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🧬 Learn how to build RNA-Seq data apps with Python & Dash. Register for the May 20 Webinar!

How to use @app.callback to check if multi attribute of dropdown is True or False

This is part of my code :

    html.H1(children='Market analysis',
            style={'textAlign': 'center'}
            ),
    dcc.Tabs(id='tabs', value='tab-1    ',
             vertical=True,
             children=[
                 dcc.Tab(label='Hourly Returns', value='tab-1'),
                 dcc.Tab(label='Returns', value='tab-2')
             ]),
    html.Div(id='tabs-content-example', children=tab2),

    dcc.Dropdown(id='sym', value='btcusd',
                 className='tab-content-htmldiv',
                 clearable=False, multi=True, options=[
            {'label': 'btcusd', 'value': 'btcusd'},
            {'label': 'ethusd', 'value': 'ethusd'},
            {'label': 'ltcusd', 'value': 'ltcusd'},
            {'label': 'xrpusd', 'value': 'xrpusd'}]),

    dcc.Dropdown(id='exc', value='bf',
                 className='secondslide-content-htmldiv',
                 clearable=False, options=[
            {'label': 'bf', 'value': 'bf'},
            {'label': 'bs', 'value': 'bs'},
            {'label': 'cb', 'value': 'cb'},
            {'label': 'ib', 'value': 'ib'},
            {'label': 'kk', 'value': 'kk'}
        ]),

    dcc.Tabs(id='timetabs', value='12', parent_className="secondtab-second-tab",
             children=[
                 dcc.Tab(label='12d', value='12'),
                 dcc.Tab(label='1m', value='1'),
                 dcc.Tab(label='3m', value='3'),
                 dcc.Tab(label='6m', value='6')
             ]),

    html.Div([html.Img(id='tabs-example-content', src='')], className='figure-display')
])
 
@app.callback(Output('tabs-content-example', 'children'),
              [Input('tabs', 'value')])
def render_content(tab):
    if tab == 'tab-1':
        return tab1
    elif tab == 'tab-2':
        return tab2

@app.callback(Output('sym', 'multi'),
              [Input('returns', 'value')])
def update_dropdown(value):
    if value == 'Daily':
        return True
    elif value == 'Hourly':
        return False

Once mutli value is set how can i check in other callback if its value is true or false ?

You would do it the exact same way as for any other component attribute:

@app.callback(
    Output("some_component", "some_attribute"),
    [Input("sym", "multi")]
)
def do_something(multi):
    if multi:
        # Do A
    else:
        # Do B
1 Like

Below is my updated code.


#reading data and modifying

def hourly_return(data, exc, time, symbols):
......


def dailyreturn(data, exc, time, *symbols):
......
...
    return daily_returns



def fig_to_uri(in_fig, close_all=True):  #function to create base64 image
    out_img = BytesIO()
    in_fig.savefig(out_img, format='png')
    if close_all:
        in_fig.clf()
        plt.close('all')
    out_img.seek(0)  # rewind file
    encoded = base64.b64encode(out_img.read()).decode("ascii").replace("\n", "")
    return "data:image/png;base64,{}".format(encoded)


tab1 = html.Div([
    html.H3('Tab content 2')
], className='tab-content-htmldiv')

tab2 = html.Div([dcc.Tabs(id='returns', value='Daily', parent_className="secondtab-first-tab",
                          children=[
                              dcc.Tab(label='Daily', value='Daily', style={'height': '10px'}),
                              dcc.Tab(label='Hourly', value='Hourly', style={'height': '10px'}),
                          ]), dcc.Dropdown(id='sym', value='btcusd',
                                           className='tab-content-htmldiv',
                                           clearable=False, multi=False, options=[
        {'label': 'btcusd', 'value': 'btcusd'},
        {'label': 'ethusd', 'value': 'ethusd'},
        {'label': 'ltcusd', 'value': 'ltcusd'},
        {'label': 'xrpusd', 'value': 'xrpusd'}]),

                 dcc.Dropdown(id='exc', value='bf',
                              className='secondslide-content-htmldiv',
                              clearable=False, options=[
                         {'label': 'bf', 'value': 'bf'},
                         {'label': 'bs', 'value': 'bs'},
                         {'label': 'cb', 'value': 'cb'},
                         {'label': 'ib', 'value': 'ib'},
                         {'label': 'kk', 'value': 'kk'}
                     ]),

                 dcc.Tabs(id='timetabs', value='12', parent_className="secondtab-second-tab",
                          children=[
                              dcc.Tab(label='12d', value='12'),
                              dcc.Tab(label='1m', value='1'),
                              dcc.Tab(label='3m', value='3'),
                              dcc.Tab(label='6m', value='6')
                          ]),

                 html.Div([html.Img(id='tabs-example-content', src='')], className='figure-display')
                 ])

app.layout = html.Div([
    html.H1(children='Market analysis',
            style={'textAlign': 'center'}
            ),
    dcc.Tabs(id='tabs', value='tab-1',
             vertical=True,
             children=[
                 dcc.Tab(label='Hourly Returns', value='tab-1'),
                 dcc.Tab(label='Returns', value='tab-2')
             ]),
    html.Div(id='tabs-content-example', children=tab2)
])


@app.callback(Output('tabs-content-example', 'children'),
              [Input('tabs', 'value')])
def render_content(tab):
    if tab == 'tab-1':
        return tab1
    elif tab == 'tab-2':
        return tab2


@app.callback(Output('sym', 'multi'),
              [Input('returns', 'value')])
def update_dropdown(value):
    if value == 'Daily':
        return True
    elif value == 'Hourly':
        return False


@app.callback(Output('tabs-example-content', component_property='src'),
              [Input('sym', 'value'),
               Input('sym', 'multi'),
               Input('exc', 'value'),
               Input('timetabs', 'value')
               ])
def update_graph(sym, multi, exc, timevalue):
    timevalue = int(timevalue)
    sns.set_style("darkgrid")
    plt.figure(figsize=(10, 4))
    if multi:
         .....

    elif not multi:
         ........
        ...........



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

I have uploaded 2 images of whats happening in my dash. Daily tab includes multiple selection and hourly tab does not have multiple selection. On switching from daily to hourly the default option vanishes away but the plot still generates[ even though I have not shown here] .

How can I make sure the default option stays when I switch tab between daily and hourly. ?
Also do you have any suggestion to improve the code ?

I would suggest to pass the default value at the same time as setting the multi attribute:

@app.callback(
    [Output('sym', 'multi'), Output('sym', 'value')],
    [Input('returns', 'value')]
)
def update_dropdown(value):
    if value == 'Daily':
        return [True, ["ethusd", "ltcusd"]]
    elif value == 'Hourly':
        return [False, "default_value_hourly"]
1 Like

Such a nice solution. I spend hours trying to figure out. It solved many of my issues. thanks a lot.