Chart.js animated on scroll

Question

I am working with chart.js but I also would want to display the chart on scroll.

I am working with this code: DEMO 1

    var doughnutData = [
            {
                value: 30,
                color:"#F7464A"
            },

            {
                value : 120,
                color : "#4D5360"
            }

        ];


var myDoughnut = new Chart(document.getElementById("canvas").getContext("2d")).Doughnut(doughnutData);

But it appears always, not on scroll.

Looking arouond i saw this fiddle wich does the effect: DEMO 2

But updating the following code to my first demo does not work: DEMO 1 UPDATED

score 3 · Accepted Answer · edited Mar 19 '14 at 15:21

3

doughnutData instead data

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

JSFiddle

In case you need a doghnut:

JSFiddle

edited Mar 19 '14 at 15:21

Xavi Alsina

643
1
8
24

answered Mar 19 '14 at 15:14

Evgeny Samsonov

2,730
4
19
28

Works perfect! Just modified the last part of the code for: getContext("2d")).Doughnut(doughnutData); since I wanted the donut one, not the pie. – Xavi Alsina Mar 19 '14 at 15:19

score 1 · Answer 2 · answered Apr 27 '14 at 07:23

If you dont wanna that restart every scroll, try this:

$(window).bind("scroll", function(){            
  $('.startChart').each(function(i){    
        var options = {
                animationEasing: 'easeOutQuart',        
                animationSteps: 150,
                segmentShowStroke: true,
                segmentStrokeColor: 'FFF'                   
        };
        var doughnutData = [
            {value: 30, color:"#F7464A"},               
            {value : 120,color : "#4D5360"}         
        ];
        var myDoughnut = new Chart(document.getElementById("canvas").getContext("2d")).Doughnut(doughnutData, options);
        $(window).unbind(i);
  });
});

http://jsfiddle.net/MU9aw/74/

Chart.js animated on scroll

2 Answers2

Linked