Hello,
It seems like I am trying to attempt the impossible. Has anyone ever successfully ran two subplots to link to the slider to use one set of frames?
I am currently attempting to draw a Country Map as well as a bar graph on the same frames to work with the same Plotly Slider.
Here is my Syntax
Is this even possible?
Thanks!
It should be possible.
Can you share a reproducible example to help us help you?
Hi @etienne
Unfortunately my source code is a bit hard to comb through. I was wondering if you could describe the layout of a frames object with Multiple Graphs.
For example to plot a graph with multiple graphs the layout of the data object looks like this:
0: (layout for graph 1)
1: (layout for graph 2)
When graphing with Frames I assumed the same but this did not work
0:{data:[
0:{1st Frame for graph1}
1:{1st Frame for graph2}
] name: 2011
}
1:{data:[
0:{2nd Frame for graph1}
1:{2nd Frame for graph2}
] name: 2012
}
Are you able to describe the layout of what the frames object is suppose to look like with multiple graphs?
I have been combing through but cannot seem to find any documentation regarding it.
Have you looked at https://plot.ly/javascript/animations/ ?
Not sure I can do a better at explaining it than in that tutorial.
Thank you @etienne, However this doesn’t go in description on how to link them to the slider.
The slider frames are similar to many of these examples but in this case because of the year taking over each frame I am still unsure the layout of two separate graphs frames fit into one set of frames. Should each graph go under its own separate data:[]? Or should it be two unique set of frames in order to run them both on the slider?
This is something I am trying to attempt
UPDATE: I figured out this example below works if the ‘y’ values are changed (the lack of movement was only because of their scale). So this is a working example of multiple plots being animated simultaneously.
ORIGINAL POST: I use plotly through Python, but I’m having the same problem. Here’s code for a relatively small failing example. According to the documentation, this is how it appears it should be configured, but the second plot on the right does not animate. Why?
fig = dict(
layout = dict(
xaxis1 = {'domain': [0.0, 0.44], 'anchor': 'y1', 'title': '1', 'range': [-2.25, 3.25]},
yaxis1 = {'domain': [0.0, 1.0], 'anchor': 'x1', 'title': 'y', 'range': [-20.0, 24.0]},
xaxis2 = {'domain': [0.56, 1.0], 'anchor': 'y2', 'title': '2', 'range': [-2.25, 3.25]},
yaxis2 = {'domain': [0.0, 1.0], 'anchor': 'x2', 'title': 'y', 'range': [-518.64200000000005, 10500.982]},
title = '',
margin = {'t': 50, 'b': 50, 'l': 50, 'r': 50},
updatemenus = [{'buttons': [{'args': [['0', '1', '2', '3'], {'frame': {'duration': 500.0, 'redraw': False}, 'fromcurrent': True, 'transition': {'duration': 0, 'easing': 'linear'}}], 'label': 'Play', 'method': 'animate'}, {'args': [[None], {'frame': {'duration': 0, 'redraw': False}, 'mode': 'immediate', 'transition': {'duration': 0}}], 'label': 'Pause', 'method': 'animate'}], 'direction': 'left', 'pad': {'r': 10, 't': 85}, 'showactive': True, 'type': 'buttons', 'x': 0.1, 'y': 0, 'xanchor': 'right', 'yanchor': 'top'}],
sliders = [{'yanchor': 'top', 'xanchor': 'left', 'currentvalue': {'font': {'size': 16}, 'prefix': 'Frame: ', 'visible': True, 'xanchor': 'right'}, 'transition': {'duration': 500.0, 'easing': 'linear'}, 'pad': {'b': 10, 't': 50}, 'len': 0.9, 'x': 0.1, 'y': 0,
'steps': [{'args': [['0'], {'frame': {'duration': 500.0, 'easing': 'linear', 'redraw': False}, 'transition': {'duration': 0, 'easing': 'linear'}}], 'label': '0', 'method': 'animate'},
{'args': [['1'], {'frame': {'duration': 500.0, 'easing': 'linear', 'redraw': False}, 'transition': {'duration': 0, 'easing': 'linear'}}], 'label': '1', 'method': 'animate'},
{'args': [['2'], {'frame': {'duration': 500.0, 'easing': 'linear', 'redraw': False}, 'transition': {'duration': 0, 'easing': 'linear'}}], 'label': '2', 'method': 'animate'},
{'args': [['3'], {'frame': {'duration': 500.0, 'easing': 'linear', 'redraw': False}, 'transition': {'duration': 0, 'easing': 'linear'}}], 'label': '3', 'method': 'animate'},
]}]
),
data = [
{'type': 'scatter', 'name': 'f1', 'x': [-2. , -1. , 0.01, 1. , 2. , 3. ], 'y': [ 4.00000000e+00, 1.00000000e+00, 1.00000000e-04, 1.00000000e+00, 4.00000000e+00, 9.00000000e+00], 'hoverinfo': 'name+text', 'marker': {'opacity': 1.0, 'symbol': 'circle', 'line': {'width': 0, 'color': 'rgba(50,50,50,0.8)'}}, 'line': {'color': 'rgba(255,79,38,1.000000)'}, 'mode': 'markers+lines', 'fillcolor': 'rgba(255,79,38,0.600000)', 'legendgroup': 'f1', 'showlegend': True, 'xaxis': 'x1', 'yaxis': 'y1'},
{'type': 'scatter', 'name': 'f2', 'x': [-2. , -1. , 0.01, 1. , 2. , 3. ], 'y': [ 2.50000000e-01, 1.00000000e+00, 1.00000000e+04, 1.00000000e+00, 2.50000000e-01, 1.11111111e-01], 'hoverinfo': 'name+text', 'marker': {'opacity': 1.0, 'symbol': 'circle', 'line': {'width': 0, 'color': 'rgba(50,50,50,0.8)'}}, 'line': {'color': 'rgba(79,102,165,1.000000)'}, 'mode': 'markers+lines', 'fillcolor': 'rgba(79,102,165,0.600000)', 'legendgroup': 'f2', 'showlegend': True, 'xaxis': 'x2', 'yaxis': 'y2'},
],
frames = [
{'name' : '0', 'layout' : {},
'data': [
{'type': 'scatter', 'name': 'f1', 'x': [-2. , -1. , 0.01, 1. , 2. , 3. ], 'y': [ 4.00, 1.00, 1.00000000e-04, 1.00, 4.00, 9.00], 'hoverinfo': 'name+text', 'marker': {'opacity': 1.0, 'symbol': 'circle', 'line': {'width': 0, 'color': 'rgba(50,50,50,0.8)'}}, 'line': {'color': 'rgba(255,79,38,1.000000)'}, 'mode': 'markers+lines', 'fillcolor': 'rgba(255,79,38,0.600000)', 'legendgroup': 'f1', 'showlegend': True, 'xaxis': 'x1', 'yaxis': 'y1'},
{'type': 'scatter', 'name': 'f2', 'x': [-2. , -1. , 0.01, 1. , 2. , 3. ], 'y': [ 2.50000000e-01, 1.00, 1.00000000e+04, 1.00, 2.50000000e-01, 1.11111111e-01], 'hoverinfo': 'name+text', 'marker': {'opacity': 1.0, 'symbol': 'circle', 'line': {'width': 0, 'color': 'rgba(50,50,50,0.8)'}}, 'line': {'color': 'rgba(79,102,165,1.000000)'}, 'mode': 'markers+lines', 'fillcolor': 'rgba(79,102,165,0.600000)', 'legendgroup': 'f2', 'showlegend': True, 'xaxis': 'x2', 'yaxis': 'y2'}],
},
{'name' : '1', 'layout' : {},
'data': [
{'type': 'scatter', 'name': 'f1', 'x': [-2. , -1. , 0.01, 1. , 2. , 3. ], 'y': [ 6. , 2. , -0.0099, 0. , 2. , 6. ], 'hoverinfo': 'name+text', 'marker': {'opacity': 1.0, 'symbol': 'circle', 'line': {'width': 0, 'color': 'rgba(50,50,50,0.8)'}}, 'line': {'color': 'rgba(255,79,38,1.000000)'}, 'mode': 'markers+lines', 'fillcolor': 'rgba(255,79,38,0.600000)', 'legendgroup': 'f1', 'showlegend': True, 'xaxis': 'x1', 'yaxis': 'y1'},
{'type': 'scatter', 'name': 'f2', 'x': [-2. , -1. , 0.01, 1. , 2. , 3. ], 'y': [ -1.75, 0.00, 1.00000100e+04, 2.00, 2.25, 3.11111111e+00], 'hoverinfo': 'name+text', 'marker': {'opacity': 1.0, 'symbol': 'circle', 'line': {'width': 0, 'color': 'rgba(50,50,50,0.8)'}}, 'line': {'color': 'rgba(79,102,165,1.000000)'}, 'mode': 'markers+lines', 'fillcolor': 'rgba(79,102,165,0.600000)', 'legendgroup': 'f2', 'showlegend': True, 'xaxis': 'x2', 'yaxis': 'y2'}],
},
{'name' : '2', 'layout' : {},
'data': [
{'type': 'scatter', 'name': 'f1', 'x': [-2. , -1. , 0.01, 1. , 2. , 3. ], 'y': [ 8. , 3. , -0.0199, -1. , 0. , 3. ], 'hoverinfo': 'name+text', 'marker': {'opacity': 1.0, 'symbol': 'circle', 'line': {'width': 0, 'color': 'rgba(50,50,50,0.8)'}}, 'line': {'color': 'rgba(255,79,38,1.000000)'}, 'mode': 'markers+lines', 'fillcolor': 'rgba(255,79,38,0.600000)', 'legendgroup': 'f1', 'showlegend': True, 'xaxis': 'x1', 'yaxis': 'y1'},
{'type': 'scatter', 'name': 'f2', 'x': [-2. , -1. , 0.01, 1. , 2. , 3. ], 'y': [ -3.75, -1.00, 1.00000200e+04, 3.00, 4.25, 6.11111111e+00], 'hoverinfo': 'name+text', 'marker': {'opacity': 1.0, 'symbol': 'circle', 'line': {'width': 0, 'color': 'rgba(50,50,50,0.8)'}}, 'line': {'color': 'rgba(79,102,165,1.000000)'}, 'mode': 'markers+lines', 'fillcolor': 'rgba(79,102,165,0.600000)', 'legendgroup': 'f2', 'showlegend': True, 'xaxis': 'x2', 'yaxis': 'y2'}],
},
{'name' : '3', 'layout' : {},
'data': [
{'type': 'scatter', 'name': 'f1', 'x': [-2. , -1. , 0.01, 1. , 2. , 3. ], 'y': [ 10. , 4. , -0.0299, -2. , -2. , 0. ], 'hoverinfo': 'name+text', 'marker': {'opacity': 1.0, 'symbol': 'circle', 'line': {'width': 0, 'color': 'rgba(50,50,50,0.8)'}}, 'line': {'color': 'rgba(255,79,38,1.000000)'}, 'mode': 'markers+lines', 'fillcolor': 'rgba(255,79,38,0.600000)', 'legendgroup': 'f1', 'showlegend': True, 'xaxis': 'x1', 'yaxis': 'y1'},
{'type': 'scatter', 'name': 'f2', 'x': [-2. , -1. , 0.01, 1. , 2. , 3. ], 'y': [ -5.75, -2.00, 1.00000300e+04, 4.00, 6.25, 9.11111111e+00], 'hoverinfo': 'name+text', 'marker': {'opacity': 1.0, 'symbol': 'circle', 'line': {'width': 0, 'color': 'rgba(50,50,50,0.8)'}}, 'line': {'color': 'rgba(79,102,165,1.000000)'}, 'mode': 'markers+lines', 'fillcolor': 'rgba(79,102,165,0.600000)', 'legendgroup': 'f2', 'showlegend': True, 'xaxis': 'x2', 'yaxis': 'y2'}],
}
]
)Indeed the second plot doesnt seem to be linked to the slider
Changed the values to see that both are working!
fig = dict(
layout = dict(
xaxis1 = {'domain': [0.0, 0.44], 'anchor': 'y1', 'title': '1', 'range': [-2.25, 3.25]},
yaxis1 = {'domain': [0.0, 1.0], 'anchor': 'x1', 'title': 'y', 'range': [-1, 11]},
xaxis2 = {'domain': [0.56, 1.0], 'anchor': 'y2', 'title': '2', 'range': [-2.25, 3.25]},
yaxis2 = {'domain': [0.0, 1.0], 'anchor': 'x2', 'title': 'y', 'range': [-1, 11]},
title = '',
margin = {'t': 50, 'b': 50, 'l': 50, 'r': 50},
updatemenus = [{'buttons': [{'args': [['0', '1', '2', '3'], {'frame': {'duration': 500.0, 'redraw': False}, 'fromcurrent': True, 'transition': {'duration': 0, 'easing': 'linear'}}], 'label': 'Play', 'method': 'animate'}, {'args': [[None], {'frame': {'duration': 0, 'redraw': False}, 'mode': 'immediate', 'transition': {'duration': 0}}], 'label': 'Pause', 'method': 'animate'}], 'direction': 'left', 'pad': {'r': 10, 't': 85}, 'showactive': True, 'type': 'buttons', 'x': 0.1, 'y': 0, 'xanchor': 'right', 'yanchor': 'top'}],
sliders = [{'yanchor': 'top', 'xanchor': 'left', 'currentvalue': {'font': {'size': 16}, 'prefix': 'Frame: ', 'visible': True, 'xanchor': 'right'}, 'transition': {'duration': 500.0, 'easing': 'linear'}, 'pad': {'b': 10, 't': 50}, 'len': 0.9, 'x': 0.1, 'y': 0,
'steps': [{'args': [['0'], {'frame': {'duration': 500.0, 'easing': 'linear', 'redraw': False}, 'transition': {'duration': 0, 'easing': 'linear'}}], 'label': '0', 'method': 'animate'},
{'args': [['1'], {'frame': {'duration': 500.0, 'easing': 'linear', 'redraw': False}, 'transition': {'duration': 0, 'easing': 'linear'}}], 'label': '1', 'method': 'animate'},
{'args': [['2'], {'frame': {'duration': 500.0, 'easing': 'linear', 'redraw': False}, 'transition': {'duration': 0, 'easing': 'linear'}}], 'label': '2', 'method': 'animate'},
{'args': [['3'], {'frame': {'duration': 500.0, 'easing': 'linear', 'redraw': False}, 'transition': {'duration': 0, 'easing': 'linear'}}], 'label': '3', 'method': 'animate'},
]}]
),
data = [
{'type': 'scatter', 'name': 'f1', 'x': [-2. , -1. , 0.01, 1. , 2. , 3. ], 'y': [ 4, 1, 1, 1, 4, 9], 'hoverinfo': 'name+text', 'marker': {'opacity': 1.0, 'symbol': 'circle', 'line': {'width': 0, 'color': 'rgba(50,50,50,0.8)'}}, 'line': {'color': 'rgba(255,79,38,1.000000)'}, 'mode': 'markers+lines', 'fillcolor': 'rgba(255,79,38,0.600000)', 'legendgroup': 'f1', 'showlegend': True, 'xaxis': 'x1', 'yaxis': 'y1'},
{'type': 'scatter', 'name': 'f2', 'x': [-2. , -1. , 0.01, 1. , 2. , 3. ], 'y': [ 2.5, 1, 1, 1, 2.5, 1], 'hoverinfo': 'name+text', 'marker': {'opacity': 1.0, 'symbol': 'circle', 'line': {'width': 0, 'color': 'rgba(50,50,50,0.8)'}}, 'line': {'color': 'rgba(79,102,165,1.000000)'}, 'mode': 'markers+lines', 'fillcolor': 'rgba(79,102,165,0.600000)', 'legendgroup': 'f2', 'showlegend': True, 'xaxis': 'x2', 'yaxis': 'y2'},
],
frames = [
{'name' : '0', 'layout' : {},
'data': [
{'type': 'scatter', 'name': 'f1', 'x': [-2. , -1. , 0.01, 1. , 2. , 3. ], 'y': [ 5, 8, 3, 2, 4, 0], 'hoverinfo': 'name+text', 'marker': {'opacity': 1.0, 'symbol': 'circle', 'line': {'width': 0, 'color': 'rgba(50,50,50,0.8)'}}, 'line': {'color': 'rgba(255,79,38,1.000000)'}, 'mode': 'markers+lines', 'fillcolor': 'rgba(255,79,38,0.600000)', 'legendgroup': 'f1', 'showlegend': True, 'xaxis': 'x1', 'yaxis': 'y1'},
{'type': 'scatter', 'name': 'f2', 'x': [-2. , -1. , 0.01, 1. , 2. , 3. ], 'y': [ 3, 7, 4, 8, 5, 9], 'hoverinfo': 'name+text', 'marker': {'opacity': 1.0, 'symbol': 'circle', 'line': {'width': 0, 'color': 'rgba(50,50,50,0.8)'}}, 'line': {'color': 'rgba(79,102,165,1.000000)'}, 'mode': 'markers+lines', 'fillcolor': 'rgba(79,102,165,0.600000)', 'legendgroup': 'f2', 'showlegend': True, 'xaxis': 'x2', 'yaxis': 'y2'}],
},
{'name' : '1', 'layout' : {},
'data': [
{'type': 'scatter', 'name': 'f1', 'x': [-2. , -1. , 0.01, 1. , 2. , 3. ], 'y': [ 4, 1, 1, 1, 4, 9], 'hoverinfo': 'name+text', 'marker': {'opacity': 1.0, 'symbol': 'circle', 'line': {'width': 0, 'color': 'rgba(50,50,50,0.8)'}}, 'line': {'color': 'rgba(255,79,38,1.000000)'}, 'mode': 'markers+lines', 'fillcolor': 'rgba(255,79,38,0.600000)', 'legendgroup': 'f1', 'showlegend': True, 'xaxis': 'x1', 'yaxis': 'y1'},
{'type': 'scatter', 'name': 'f2', 'x': [-2. , -1. , 0.01, 1. , 2. , 3. ], 'y': [ 2.5, 1, 1, 1, 2.5, 1], 'hoverinfo': 'name+text', 'marker': {'opacity': 1.0, 'symbol': 'circle', 'line': {'width': 0, 'color': 'rgba(50,50,50,0.8)'}}, 'line': {'color': 'rgba(79,102,165,1.000000)'}, 'mode': 'markers+lines', 'fillcolor': 'rgba(79,102,165,0.600000)', 'legendgroup': 'f2', 'showlegend': True, 'xaxis': 'x2', 'yaxis': 'y2'}],
},
{'name' : '2', 'layout' : {},
'data': [
{'type': 'scatter', 'name': 'f1', 'x': [-2. , -1. , 0.01, 1. , 2. , 3. ], 'y': [ 5, 8, 3, 2, 4, 0], 'hoverinfo': 'name+text', 'marker': {'opacity': 1.0, 'symbol': 'circle', 'line': {'width': 0, 'color': 'rgba(50,50,50,0.8)'}}, 'line': {'color': 'rgba(255,79,38,1.000000)'}, 'mode': 'markers+lines', 'fillcolor': 'rgba(255,79,38,0.600000)', 'legendgroup': 'f1', 'showlegend': True, 'xaxis': 'x1', 'yaxis': 'y1'},
{'type': 'scatter', 'name': 'f2', 'x': [-2. , -1. , 0.01, 1. , 2. , 3. ], 'y': [ 3, 7, 4, 8, 5, 9], 'hoverinfo': 'name+text', 'marker': {'opacity': 1.0, 'symbol': 'circle', 'line': {'width': 0, 'color': 'rgba(50,50,50,0.8)'}}, 'line': {'color': 'rgba(79,102,165,1.000000)'}, 'mode': 'markers+lines', 'fillcolor': 'rgba(79,102,165,0.600000)', 'legendgroup': 'f2', 'showlegend': True, 'xaxis': 'x2', 'yaxis': 'y2'}],
},
{'name' : '3', 'layout' : {},
'data': [
{'type': 'scatter', 'name': 'f1', 'x': [-2. , -1. , 0.01, 1. , 2. , 3. ], 'y': [ 4, 1, 1, 1, 4, 9], 'hoverinfo': 'name+text', 'marker': {'opacity': 1.0, 'symbol': 'circle', 'line': {'width': 0, 'color': 'rgba(50,50,50,0.8)'}}, 'line': {'color': 'rgba(255,79,38,1.000000)'}, 'mode': 'markers+lines', 'fillcolor': 'rgba(255,79,38,0.600000)', 'legendgroup': 'f1', 'showlegend': True, 'xaxis': 'x1', 'yaxis': 'y1'},
{'type': 'scatter', 'name': 'f2', 'x': [-2. , -1. , 0.01, 1. , 2. , 3. ], 'y': [ 2.5, 1, 1, 1, 2.5, 1], 'hoverinfo': 'name+text', 'marker': {'opacity': 1.0, 'symbol': 'circle', 'line': {'width': 0, 'color': 'rgba(50,50,50,0.8)'}}, 'line': {'color': 'rgba(79,102,165,1.000000)'}, 'mode': 'markers+lines', 'fillcolor': 'rgba(79,102,165,0.600000)', 'legendgroup': 'f2', 'showlegend': True, 'xaxis': 'x2', 'yaxis': 'y2'}],
}
]
)
plot(fig, auto_open=False)