animate on scroll

[issam]

Hi,

is there any example that showcase chart animation on scrolling ?

i want to make a page with several donuts charts , some of them are not visible until i scroll the page .

so i want to run the initial donut animation only when the user scroll to .

is that possible please?

thanks and good day .

[Saravana Kumar Kanagavel]

Hi Issam,
Thanks for using syncfusion products. We have analyzed your query and prepared sample based on your requirement. In the sample we are having two charts and for the second chart we have set ”initSeriesRender” property as false. So initially series for the second chart is not rendered. Please find the below code snippet.

[HTML]

$("#container1").ejChart(
      {
        initSeriesRender: false
   });

We have subscribed the onscroll event for the window and written the below code.

[JS]

function testScroll(evt) { //Trigger the scroll event

        if (window.pageYOffset > 300) {

            var chartCalObj = $("#container1").data("ejChart");

            chartCalObj.seriesRender();

        }

    }
window.onscroll = testScroll

In the above code, if the pageOffset is more than 300, then we have called chart’s seriesRender() method. So while scrolling the page, series for the second chart is created. In the below link we have attached sample for your reference.

Sample link: http://www.syncfusion.com/downloads/support/forum/123638/ze/Sample1158000935
Please let us know if you have any concern.

Regards,
Saravana Kumar K