Rotate a pie chart in charts.js - Javascript Chart.js

Javascript examples for Chart.js:Pie Chart

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

Description

Rotate a pie chart in charts.js

Demo Code

ResultView the demo in separate window 

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

#canvas{//www  .j a  v  a2s . c  o m
   width:300px;
   height:300px;
}


      </style> 
      <script type="text/javascript">
var VanillaRunOnDomReady = function() {
var ctx = document.getElementById('canvas');
var data = {
  labels: ["Running Plans","Expired Plans"],
  datasets: [{
    data: [488, 3475],
    borderWidth: 1,
    backgroundColor: ["#FF9030", "#008DB7"],
    hoverBackgroundColor: ["rgba(255, 144, 48, 0.44)", "rgba(0, 141, 183, 0.82)"]
  }]
};
var options = {
  legend: {display: false},
  rotation: (-0.5*Math.PI) - (25/180 * Math.PI)
}
var myPieChart = new Chart(ctx,{
  type: 'pie',
  data: data,
  options: options
});
    }
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="canvas"></canvas>  
   </body>
</html>

Related Tutorials