setInterval on myDoughnut animation

Question

I want to repeat the animation of the myDoughnut animation every 5 seconds. At the moment it only animates on page load.

<script>
var doughnutData = [
    {
        value: 80,
        color:"#74cfae"
    },
    {
        value : 20,
        color : "#3c3c3c"
    }
];
                            
var myDoughnut = new Chart(document.getElementById("CSS3").getContext("2d")).Doughnut(doughnutData);                    
</script>

I have tried using

setInterval("Chart();", 500);

I am still learning Javascript so a little unsure as to if I am referencing the correct function and where to place the setInterval code.

The animation can be viewed at the bottom of this website: http://www.chartjs.org/

Many thanks for any guidance and direction!

Without knowing what Chart and Doughnut are, it's hard to say. However, the way this is typically done is to create an instance of an object and save a reference of it in a variable so that `var myCart = new Chart(document.getElementById("CSS3").getContext("2d"))` and then you might have a function/method on that object that can be called from setInterval. — Harvey A. Ramer, Mar 04 '14 at 15:45
`function repeat(){ var doughnutData = [ { value: 80, color:"#74cfae" }, { value : 20, color : "#3c3c3c" } ]; var myDoughnut = new Chart(document.getElementById("CSS3").getContext("2d")).Doughnut(doughnutData); } setInterval("repeat();", 2500);` This works but there is a delay on page load. I want the animation to kick in on pageload and then repeat for x seconds thereafter. — danelig, Mar 04 '14 at 15:59

score 2 · Answer 1 · answered Mar 04 '14 at 15:43

2

setInterval takes a function as parameter.

Try:

setInterval(function(){ Chart(); }, 500);

answered Mar 04 '14 at 15:43

Mike Bovenlander

5,236
5
28
47

1

If all that needs to be done is the invocation of `Chart`, just use `setInterval(Chart, 500);`. No need to wrap it in an anonymous function if all the anonfunc is going to do is call `Chart`. – Asad Saeeduddin Mar 04 '14 at 15:47
Where did you guys find any documentation on the setInterval prototype? I've searched the documentation available on Chart.js and cannot come up with anything. A link would be appreciated. Thanks – estebro Jan 26 '15 at 03:10

score 2 · Accepted Answer · answered Mar 04 '14 at 16:03

2

You should pass a proper function to setInterval.

I looked for a way to replay the animation of Chart object but i couldn't find any directive in ChartJS documentation.

Here is how you function should look like:

setInterval(function () {
  myDoughnut = new Chart(document.getElementById("CSS3").getContext("2d")).Doughnut(doughnutData);
           }, 2000);

Here is working JSFiddle.

answered Mar 04 '14 at 16:03

tozlu

4,667
3
30
44

This is working. However there is a delay in the animation, I want the animation to start as normal and then start to repeat after x seconds. Also, if you zoom in and out the doughnut gets gradually smaller or larger, this must must be bug in HTML5 canvas! Very odd. [SEE HERE](http://www.gregorydanelian.comule.com) – danelig Mar 04 '14 at 16:10
1

Copy paste the JS code in fiddle above. It starts as soon as page loads. After that it replays every 2 seconds. – tozlu Mar 04 '14 at 16:12
Thanks! Works great in fiddle but not when my site loads... [mysite](http://www.gregorydanelian.comule.com) ...strange. – danelig Mar 04 '14 at 16:17
1

It is because you didn't copy paste the code in fiddle. Notice that there is a function above the __setInterval__ to play the animation when page loads for once. – tozlu Mar 04 '14 at 16:21
AH ha! Perfect. Thank you. I thought about trying that but still learning JS. It's strange how zooming in keeps increases the size of the doughnut and zooming out keeps decreases the size of the doughnut! – danelig Mar 04 '14 at 16:26

setInterval on myDoughnut animation

2 Answers2