We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

animate on scroll

Thread ID:

Created:

Updated:

Platform:

Replies:

123638 Apr 5,2016 11:39 PM UTC Apr 6,2016 02:46 PM UTC JavaScript 1
loading
Tags: ejChart
issam
Asked On April 5, 2016 11:39 PM UTC

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 [Syncfusion]
Replied On April 6, 2016 02:46 PM UTC

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

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;