Question

63

How to make the Chart.js animate when scrolled to that section?

rated 0 times [ 69] [ 6] / answers: 1 / hits: 36546 / 11 Years ago, thu, september 12, 2013, 12:00:00

I am trying to use the pie chart from Chart.js (http://www.chartjs.org/docs/#pieChart-exampleUsage). Everything works smooth, but the animation happens as soon as the page loads, but since the user has to scroll down to see the chart, they won't see the animation. Is there anyway I can make the animation to start only when scrolled to that position? Also if possible, is it possible to animate everytime when that chart becomes into view?

My code is as follows:

<canvas id=canvas height=450 width=450></canvas>

    <script>

        var pieData = [

                {

                    value: 30,

                    color:#F38630

                },

                {

                    value : 50,

                    color : #E0E4CC

                },

                {

                    value : 100,

                    color : #69D2E7

                }



            ];



    var myPie = new Chart(document.getElementById(canvas).getContext(2d)).Pie(pieData);



    </script>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

stephonkeandrer

Add To Favorites

Follow

Total Points: 392

Total Questions: 94

Total Answers: 100

Location: Tajikistan

Member since Sun, Aug 29, 2021

3 Years ago

stephonkeandrer questions

1 Electron: how to open an url in the same window and after the user do some action go back to application in the same window

Thu, Mar 24, 22, 00:00, 2 Years ago

1 How to disable scroll on body when fullscreen menu open

Sun, Jun 28, 20, 00:00, 4 Years ago

1 How databind a textarea component text value and update it?

Tue, Jun 9, 20, 00:00, 4 Years ago

1 Angular; how to re-render component data when I update variable in script. Binding data is working, but not updating

Mon, May 4, 20, 00:00, 4 Years ago

1 Loading module was blocked because of a disallowed MIME type (“application/wasm”)

Sun, Oct 13, 19, 00:00, 5 Years ago

View All

answered 11 Years ago santana · Accepted Answer

You can combine the check for whether something is viewable with a flag to keep track of whether the graph has been drawn since it appeared in the viewport (though doing this with the plugin bitiou posted would be simpler):

http://jsfiddle.net/TSmDV/

var inView = false;



function isScrolledIntoView(elem)

{

    var docViewTop = $(window).scrollTop();

    var docViewBottom = docViewTop + $(window).height();



    var elemTop = $(elem).offset().top;

    var elemBottom = elemTop + $(elem).height();



    return ((elemTop <= docViewBottom) && (elemBottom >= docViewTop));

}



$(window).scroll(function() {

    if (isScrolledIntoView('#canvas')) {

        if (inView) { return; }

        inView = true;

        new Chart(document.getElementById(canvas).getContext(2d)).Pie(data);

    } else {

        inView = false;  

    }

});