Michael Ladt priority commented 3 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 3 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 3 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 3 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 3 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 3 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]