CODEWITHSUNDEEP
javascriptcssanimationgraph
GLB Project
GLB Project

Reputation: 19

Javascript/CSS: create graph animation based on data changing in time

Don't ask me why but I made up my mind to create an animation of a graph like the one you see in this video with Javascript https://www.youtube.com/watch?v=FJi5LcWpznw

My data are similar to

2023-01-01 user1,10 user2,12
2023-01-02 user1,11 user2,12 user3,1
2023-01-03 user1,11 user2,14 user3,12 user4,5

and so on .. day by day

Can you help me to convert my madness into all this?

Thanks in advance

Upvotes: 0

Views: 85

Answers (1)

Brian Stinar
Brian Stinar

Reputation: 1109

You're going to need more data, otherwise your video is going to only have three states in it...

I'd start by creating a static graphic, using your favorite JavaScript charting library (https://www.chartjs.org/?) I'd store all this data in a day-sorted array. After you get that working, then I'd come up with a mapping between days and seconds. For a very limited number of days, I'd probably do something like 1 day = 3 seconds. Then, I'd create an event loop, and every three seconds, pick out the next datapoint from the array, and update the graphics. After that point, you need to record your browser.

You'd better update your question quickly before the stackoverflow admins reject it for one of their many, many, many reasons and edit my response into oblivion.

Upvotes: 1

Related Questions