Chart.js Animated On Scroll

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: 3

Solution 1:

doughnutData instead data

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

JSFiddle

In case you need a doghnut:

JSFiddle

Solution 2:

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 = newChart(document.getElementById("canvas").getContext("2d")).Doughnut(doughnutData, options);
        $(window).unbind(i);
  });
});

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