Black Lives Matter. Please consider donating to Black Girls Code today.

Display different data & plot on each dropdown option

Hello guys,

I’ve created a dropdown, and I want to have different plots depending on each dropdown selection.

My expectaion is for example;
the default page does not show any plot

  • data 1 selected --> activate 1st callback
  • data 2 selected --> activate 2nd callback

However, the first callback is always activated. And the second dropdown option doesn’t seem to acticate second callback either.

My current code is below.
Please enlighten me, and I would really appreciate your help !

       app.layout = html.Div(
        html.Div([

            html.Div(
                html.H1('Dash App Layout')
            ),

            html.Div(
                dcc.Dropdown(
                        options=[
                            {'label': 'data 1', 'value': 1},
                            {'label': 'data 2, 'value': 2},
                        ],
                    id = 'dropdown',
                    placeholder="Select your option",

                ),
                style = {
                        'width' : '40%'
                }
            ),

            html.Div(
                html.Div(id='dropdown-output-1'),
            ),

            html.Div(
                html.Div(id='dropdown-output-2'),
            ),
            ],
        )
    )


    @app.callback(Output('dropdown-output-1', 'children'),
                    [Input('dropdown', 'value')])
    def display_content(value=1):

            data = [
                {
                    'x': [1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003,
                          2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012],
                    'y': [345, 112, 112, 43, 112, 54, 65, 567, 465, 263,
                          786, 687, 134, 354, 488, 245, 223, 435],
                    'name': 'data 1',
                    'marker': {
                        'color': 'rgb(247, 160, 46)'
                    },
                    'type': 'scatter'
                },

                {
                    'x': [1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003,
                          2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012],
                    'y': [16, 13, 10, 11, 28, 37, 43, 55, 56, 88, 105, 156, 270,
                          299, 340, 403, 549, 499],
                    'name': 'test 2',
                    'marker': {
                        'color': 'rgb(75, 188, 145)'
                    },
                    'type': 'bar'
                }

            ]

            return html.Div([

                dcc.Graph(
                    id='graph',
                    figure={
                        'data': data,
                        'layout': {
                            'margin': {
                                'l': 50,
                                'r': 50,
                                'b': 50,
                                't': 0
                            },
                            'legend': {'x': 0, 'y': 1}
                        }
                    }
                )

            ])


    @app.callback(Output('dropdown-output-2', 'children'),
                    [Input('dropdown', 'value')])
    def display_content(value=2):
            data = [
                {
                    'x': [1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003,
                          2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012],
                    'y': [219, 146, 112, 127, 124, 180, 236, 207, 236, 263,
                          350, 430, 474, 526, 488, 537, 500, 439],
                    'name': 'test 1',
                    'marker': {
                        'color': 'rgb(247, 160, 46)'
                    },
                    'type': 'box'
                },

                {
                    'x': [1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003,
                          2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012],
                    'y': [16, 13, 10, 11, 28, 37, 43, 55, 56, 88, 105, 156, 270,
                          299, 340, 403, 549, 499],
                    'name': 'test 2',
                    'marker': {
                        'color': 'rgb(75, 188, 145)'
                    },
                    'type': 'box'
                }

            ]

            return html.Div([

                dcc.Graph(
                    id='graph',
                    figure={
                        'data': data,
                        'layout': {
                            'margin': {
                                'l': 50,
                                'r': 50,
                                'b': 50,
                                't': 0
                            },
                            'legend': {'x': 0, 'y': 1}
                        }
                    }
                )

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

Hi! it’s pretty same as this Easy way to have multiple outputs in a callback
you can update html.div children property to fill it with different graphs.

1 Like

Hi @roman ,

I had to admit, I need to improve my search capability because your posting was the answer I was looking for.

AND I have no idea why I couldn’t thought of assign condition for multiple outputs within callback functions.

Thanks for your guideline !!!