How to create a scroll with an animation

📊 Plotly Python
1

Hello,

I’m struggling to make an animation with Graph objects and Frames. So I tried to do it step by step. First step is simply to scroll the chart when the “Play” button is clicked. In order to do so, I updated the layout part in the frames (I’m not sure it’s the right way to do it). But as soon as the graph is shown, it constantly moves backwards and forwards (while I haven’t even pushed the “Play” button yet).

So, what’s wrong with my code?

layout = go.Layout(xaxis={"range":[0, 100], "autorange":False},
				   yaxis={"range":[0, 100], "autorange":False},
				   updatemenus=[dict(type="buttons", buttons=[dict(label="Play", method="animate", args=[None])])])

frames = [go.Frame(layout=go.Layout(xaxis={"range": [i, 100 + i]})) for i in range(1, 11)]

fig = go.Figure(layout=layout, frames=frames)

fig.show()
2

Hi @Mark531 ,

If I don’t misunderstand your question, you want to run simply scroll the chart to the right.
And your problem are :

  1. the animation start play, when plot are showing, event you dont click button.
  2. the plot constantly moves backwards and forwards.

To solved problem no.1 I try to copy paste your code and run it, but there is no issue that the animation start without click the button. it works well.

Problem no.2, which the plot start constantly moves backwards and forwards, you maybe need additional change in your current code.

try to set xaxis range larger, for example : range(0, 1000,100).
the initial xaxis range is 0 to 99, second xaxis range is 100 to 199 and so on.

You can slow animation transition to make more smooth transition, by adding frame duration and transition duration (unit in miliseconds) to args keyword arguments.

from the docs :

The transition duration defines the amount of time spent interpolating a trace from one state to another (currently limited to scatter traces), while the frame duration defines the total time spent in that state.

My suggestion solution is on code below:

# imports
import plotly.graph_objects as go

layout = go.Layout(xaxis={"range":[0, 100], "autorange":False},
                   yaxis={"range":[0, 100], "autorange":False},
                   updatemenus=[dict(type="buttons", buttons=[dict(label="Play", method="animate", args=[None,{"frame": {"duration": 1000},"transition": {"duration": 500}}])])])

frames = [go.Frame(layout=go.Layout(xaxis={"range": [i, 100 + i]})) for i in range(0, 1000,100)]

fig = go.Figure(layout=layout, frames=frames)

fig.show()

Hope this help you find best solution.