dcc.Graph(
id='example-graph-2',
figure={
'data': [
{'x': ['1', '2', '3', '4'], 'y': [4,1,2,1.5], 'type':'bar', 'name': 'A'},
{'x': ['6.1, '6.1', '6.2', '6.3'], 'y': [2,4,5, 3.1], 'type':'bar', 'name': 'B'},
{'x': ['9.0', '9.1', '9.2', '8.3'], 'y': [1,1,2, 2.9], 'type':'bar', 'name': 'C'},
{'x': ['14.0', '14.1', '14.2', 1'4.3'], 'y': [0.9,4,5, 1.2], 'type':'bar', 'name': 'D'},
],
'layout': {
'plot_bgcolor': colors['background'],
'paper_bgcolor': colors['background'],
'font': {
'color': colors['text']
}
}
}
)
@app.callback(
dash.dependencies.Output('example-graph-2', 'figure'),
[dash.dependencies.Input('Selection', 'value')])
def update_multi_graph(Selection):
if Selection == ['A, 'B', 'C', 'D']:
return { 'data' : [go.Bar({'x': ['1', '2', '3', '4'], 'y': [4,1,2,1.5], 'type':'bar', 'name': 'A'},
{'x': ['6.1, '6.1', '6.2', '6.3'], 'y': [2,4,5, 3.1], 'type':'bar', 'name': 'B'},
{'x': ['9.0', '9.1', '9.2', '8.3'], 'y': [1,1,2, 2.9], 'type':'bar', 'name': 'C'},
{'x': ['14.0', '14.1', '14.2', 1'4.3'], 'y': [0.9,4,5, 1.2], 'type':'bar', 'name': 'D'},
hoverinfo='label+value+percent',
#textinfo='yes'
)],
'layout' : go.Layout(
title='Results',
showlegend=True,
legend=go.Legend(
x=0,
y=1.0
),
margin=go.Margin(l=40, r=0, t=40, b=30)
)
}
elif Selection == ['A']:
return { 'data' : [go.Bar({'x': ['1', '2', '3', '4'], 'y': [4,1,2,1.5], 'type':'bar', 'name': 'A'},
hoverinfo='label+value+percent',
#textinfo='yes'
)],
'layout' : go.Layout(
title='Results',
showlegend=True,
legend=go.Legend(
x=0,
y=1.0
),
margin=go.Margin(l=40, r=0, t=40, b=30)
)
}
And such is for B, C, D but i could have combination like AB, BCD… and such.
If my X-axes has [1, 2, 3, 4] and if i chose options A, B, C, D from the multi drop down. 4 graphs should be seen for each value on the X-axes and based on my change of selection, it should reflect there as well.