Topic: Animating a chart on scroll

Michael Ladt priority asked 2 years ago


Using a horizontal bar chart I would like to see if I can animate it on scroll and also change the color of the lines behind the bars.


Marcin Luczak staff answered 2 years ago


Hi,

You can't animate charts directly with your custom function, however, you can change any data and any option on scroll event, which will cause the chart to animate. Please see my snippet: https://mdbootstrap.com/snippets/jquery/marcin-luczak/3035897.

Keep coding,

Marcin from MDB


Michael Ladt priority commented 2 years ago

This is helpful but I am a little bit confused, how do I get them to start at 0 and only animate 1 time once the chart is in view?


Marcin Luczak staff commented 2 years ago

I've refactored my snippet so the chart is animated and filled with data only once, 500ms after the page is loaded. To achieve this you have to set the default values to 0 (at line 9 of js) and update them in $(document).ready(()=>{} block.

I hope this answers your question :)


Michael Ladt priority commented 2 years ago

I appreciate it but I wanted to get it to animate once, on scroll. Once it enters the viewport the animation starts and ends. Is this possible? Thanks again for your help.


Marcin Luczak staff commented 2 years ago

To make it work I've refactored the snippet and added an IntersectionObserver that will observe the chart and run the animation once 50% of the chart's height is visible in the viewport (threshold option). If you would like to customize it yourself please use the IntersectionObserver API https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

Keep coding,

Marcin


Michael Ladt priority commented 2 years ago

Okay, sorry, it's taken me a little while to come back to this. So I understand what's going on here but I am unsure of how to return my data to the array, I see your snippet has:

const intersectionCallback = (entries) => { entries.forEach(entry => { if (entry.isIntersecting) { myBarChart.data.datasets[0].data = myBarChart.data.datasets[0].data.map(() => { return Math.floor(Math.random() * 10 + 1) });

How would I return my data? data: [94, 49, 45, 39, 28, 23]

I sincerely appreciate the help


Marcin Luczak staff commented 2 years ago

To use your data just change myBarChart.data.datasets[0].data = myBarChart.data.datasets[0].data.map(() => { return Math.floor(Math.random() * 10 + 1) });

to

myBarChart.data.datasets[0].data = [94, 49, 45, 39, 28, 23]



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: MDB4 4.19.2
  • Device: Mac
  • Browser: Chrome
  • OS: Big Sur
  • Provided sample code: No
  • Provided link: No