Hide/show graph based on drop down selections

Dash Python
1

I have an app that I have made on another platform but I would like to use dash as it would help me integrate a lot of what I am doing.
Is it possible to hide and show graphs based on the options selected in the drop down list. See attached images for an example of what I am talking about.

dash_question2.PNG1325×501 22.7 KB

dash_question1.PNG1353×498 30.7 KB

1 Like
2

There are two ways that you can do this.

Option 1 - Return Multiple Graph Elements in the children Property of a Div

Here’s a sketch:

dash.layout = html.Div([
    dcc.Dropdown(id='dropdown', multi=True, options=[{'value': i, 'label': I} for i in ['BAP', 'Low Carbon']])
    html.Div(id='output')
])

@app.callback(Output('output', 'children'), [Input('dropdown', 'value')])
def display_graphs(selected_values):
    graphs = []
    for values in selected_values:
        graphs.append(html.Div(dcc.Graph(...)))
    return graphs

Option 2 - Create 1 Graph with Subplots

Here are docs on subplots: https://plot.ly/python/subplots/

This has the advantage that all graphs will share the same legend and could potentially share the same axes.

Here’s a sketch:

import plotly.tools as tls

dash.layout = html.Div([
    dcc.Dropdown(id='dropdown', multi=True, options=[{'value': i, 'label': I} for i in ['BAP', 'Low Carbon']])
    dcc.Graph(id='graph')
])

@app.callback(Output('graph', 'figure'), [Input('dropdown', 'value')])
def display_graphs(selected_values):
     graph = tls.make_subplots(...)
5 Likes
3

Thanks Chris, I thought it was something simple