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

Dash Python
1

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 ?

2

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
3

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 ?

image
image1359×172 20.1 KB

image
image1365×145 13.9 KB

4

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
5

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