Selecting/deselecting graphs in dropdown

Dash Python
1

Hi all,

What is the proper way to return multiple graphs in an html.div? I was looking at the example that was posted here but when i put in my own graphs it doesn’t matter what option in the drop down I choose, it only shows 1. Each graph has a unique ID that is referenced in the dcc.dropdown.

Do I need multiple outputs if they are all being appended to the same div?

1 Like
2

Can you post a small, reproducable example?

3

Thanks for your help Chris!

I have this example that I have been toying with. I have 3 different graphs that I want to connect to the 3 different options in the drop down. When I choose one of the options in the dropdown it always shows me all of the graphs. I don’t think that daisy chaining the append.graphs is the right way to go about this but I can’t think of how to do this. Should each value in the dropdown be a discreet output div? I just want each graph to appear/disappear when the dropdown values are selected/deselected. I feel like there is something very simple about this that I am not grasping and I appreciate any help I can get, sincerely.

    app = dash.Dash()



    app.layout=html.Div([
          dcc.Dropdown(
                    id= 'dropdown',
            options=[
                {'label': 'Cassette UPH Tracker', 'value': 'example-graph1'},
                {'label': 'Cassette Status Tracker', 'value': 'example-graph2'},
                {'label': 'Cassette Comment Tracker', 'value': 'example-graph3'}
            ],
            multi='True'
            
            
        ),
        html.Div(id='output')
        
    ])

    className='container'



    @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(
                id='example-graph1',
                figure={
                    'data': [
                        {'x': ['OK', 'PBC', 'FAIL', 'TOTAL'], 'y': [111, 22, 33, 34], 'type': 'bar', 'name': 'Jack ', 'width': .05},
                        {'x': ['OK', 'PBC', 'FAIL', 'TOTAL'], 'y': [111, 22, 33, 34], 'type': 'bar', 'name': 'Ian ','width': .05},
                        {'x': ['OK', 'PBC', 'FAIL', 'TOTAL'], 'y': [111, 22, 33, 34], 'type': 'bar', 'name': 'Evan ','width': .05},
                    ],
                       
                    }
                ),
                
                )),
            graphs.append(html.Div(
                
                    
                    
                dcc.Graph(
                id='example-graph2',
                figure={
                    'data': [
                        {'x': ['OK', 'PBC', 'FAIL', 'TOTAL'], 'y': [111, 22, 3, 34], 'type': 'bar', 'name': 'Jack ', 'width': .05},
                        {'x': ['OK', 'PBC', 'FAIL', 'TOTAL'], 'y': [111, 22, 33, 34], 'type': 'bar', 'name': 'Ian ','width': .05},
                        {'x': ['OK', 'PBC', 'FAIL', 'TOTAL'], 'y': [111, 22, 33, 354], 'type': 'bar', 'name': 'Evan ','width': .05},
                    ],
                       
                    }
                ),
                
                )),
            graphs.append(html.Div(
                
                    
                    
                dcc.Graph(
                id='example-graph3',
                figure={
                    'data': [
                        {'x': ['OK', 'PBC', 'FAIL', 'TOTAL'], 'y': [112, 22, 33, 34], 'type': 'bar', 'name': 'Jack', 'width': .05},
                        {'x': ['OK', 'PBC', 'FAIL', 'TOTAL'], 'y': [118, 22, 33, 34], 'type': 'bar', 'name': 'Ian ','width': .05},
                        {'x': ['OK', 'PBC', 'FAIL', 'TOTAL'], 'y': [115, 22, 33, 34], 'type': 'bar', 'name': 'Evan ','width': .05},
                    ],
                       
                    }
                ),
                
                )),
            
        return graphs

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

@gravesmcgavon - It looks like you are appending all three graphs no matter how many values are selected. You probably need something like:

if 'example-graph-1' in selected_values:
    graphs.append(...) # append graph 1

if 'example-graph-2' in selected_values:
    graphs.append(...) # append graph 2

if 'example-graph-3' in selected_values:
    graphs.append(...) # append graph 3

return graphs
5

That is EXACTLY what I needed. I could’ve sworn I had something like this drafted up at one point but it wasn’t working as I expected. This is absolutely perfect, you’ve made my day!

1 Like
6

Give me the full code