chart.js Doughnut anticlockwise animation - Javascript Chart.js

Javascript examples for Chart.js:Doughnut Chart

  1. HOME
  2. Javascript
  3. Chart.js
  4. Doughnut Chart

Description

chart.js Doughnut anticlockwise animation

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>chart.js doughnut reverse</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.js"></script> 
      <style id="compiled-css" type="text/css">

#myChart{/*  ww w  .  j a va2 s  .  c o  m*/
   transform: scaleX(1);
   max-width: 400px;
   width: auto;
   height: auto;
}


      </style> 
      <script type="text/javascript">
    var VanillaRunOnDomReady = function() {
      var data = {
        labels: [],
        datasets: [
          {
            data: [10, 0],
            backgroundColor: [
              "#D4CCC5",
              "#D4CCC5"
            ]
          }]
      };
var promisedDeliveryChart = new Chart(document.getElementById('myChart'), {
  type: 'doughnut',
  data: data,
  options: {
     responsive: true,
    legend: {
      display: false
    },
    rotation: 1 * Math.PI,
    circumference: 1 * Math.PI
  }
});
Chart.pluginService.register({
  beforeDraw: function(chart) {
    var width = chart.chart.width,
        height = chart.chart.height,
        ctx = chart.chart.ctx;
    ctx.restore();
    var fontSize = (height / 114).toFixed(2);
    ctx.font = fontSize + "em sans-serif";
    ctx.textBaseline = "middle";
    var text = "-17.7",
        textX = Math.round((width - ctx.measureText(text).width) / 2),
        textY = height / 1.25;
    ctx.fillText(text, textX, textY);
    ctx.save();
  }
});
setInterval(function() {
    data.datasets[0].data[1] = 60;
    data.datasets[0].backgroundColor[1] = "#F7464A";
       promisedDeliveryChart.update();
}, 1000);
    }
var alreadyrunflag = 0;
if (document.addEventListener)
    document.addEventListener("DOMContentLoaded", function(){
        alreadyrunflag=1;
        VanillaRunOnDomReady();
    }, false);
else if (document.all && !window.opera) {
    document.write('<script type="text/javascript" id="contentloadtag" defer="defer" src="javascript:void(0)"><\/script>');
    var contentloadtag = document.getElementById("contentloadtag")
    contentloadtag.onreadystatechange=function(){
        if (this.readyState=="complete"){
            alreadyrunflag=1;
            VanillaRunOnDomReady();
        }
    }
}
window.onload = function(){
  setTimeout("if (!alreadyrunflag){VanillaRunOnDomReady}", 0);
}

      </script> 
   </head> 
   <body> 
      <canvas id="myChart"></canvas>  
   </body>
</html>

Related Tutorials