0

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

2 Answers 2

3

doughnutData instead data

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

JSFiddle

In case you need a doghnut:

JSFiddle

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

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/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.