Update data for each iteration

plotly.js
1

I have two traces, one is a standard one populated by an array, the other one only contains one element.
I would like to update the second trace for each iteration when pressing a button.

To do so, I am using Plotly.restyle, it works but the chart only updates after the end of the loop so I cannot see the intermediate values. Is it possible to see the intermediate values, so it will look like an animation.

(The second trace only contains one data that I want to update. Is the use of Plotly.restyle is appropriate ? )

Here is the code I use to update my data.

for (i = 0; i < vdata.length; i++) { var update = { x : [[vdata[i].x]], y : [[vdata[i].y]], } Plotly.restyle(myDiv, update, [1]); }

2

You’ll need specify a timeout between each restyle call in order to see the progression.

The best way to do this is to write a recursive update function that wait X seconds, calls restyle and repeat once restyle is done. See example: http://codepen.io/etpinard/pen/kXGYyQ

Moreover, I should mention that animations are coming soon to plotly.js. We’ll start with support for scatter and axis ranges only. Please subscribe to https://github.com/plotly/plotly.js/pull/717 for the latest development info.

1 Like
3

Thank you very much I was able to update my graph thanks to your example.
However I still have a concern, while updating the axis position automatically updates. Is there a way to make the axis position static ?

EDIT :
Sorry, my question was off-topic but I found how to solve my problem by adding the following layout.

var layout = {
autosize: false, 
xaxis: {
	range : [0, 10]
},

yaxis: {
	range : [-1, 1]
}

}
Plotly.newPlot(myDiv, plotData, layout);

1 Like
4

I have an additional question concerning the update of data.
During the update, if I left-click on the plot, the update stops and in the console the following message error appears : Uncaught (in promise) undefined

I don’t understand where this error comes from, what can I do to correct my code ?
(My update code is exactly like the example given in the post above)