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!

Answer 1

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.

Answer 2

setInterval takes a function as parameter.

Try:

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