Chart animation

💬 App Building
2

Hey @bg1900!

This is a fun question! Since it's possible to pass a dynamic dataset into the chart component you can set up a kind of pseudo-animation by having a query return different values based on where the animation currently is, e.g.

return trajectoryData.data.slice(0, frameIndex);

You can then set up another JS query that triggers it at regular intervals using addtionalScope:

const frameSpeedMs = 100;

for(let i = 0; i <= trajectoryData.data.length; i++){
  animatedData.trigger({additionalScope: {frameIndex: i}}); 
  await new Promise(r => setTimeout(r, frameSpeedMs)); //adds delay
}

It may be helpful to fix the range of your chart (Plotly docs on how to do that here).

With that you can get something like this:

This might not work well with larger data sets or more complex animations. If you want to set up something like that it might be worth importing PlotlyJS as a library (docs on how to do that here, link to the PlotlyJS library here). The are some cool examples of animation in their docs (here).

I've attached the JSON of an app you can import to play around with either option!

animated_chart.json

1 Like