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)