Chart.js ring chart - Javascript Chart.js

Javascript examples for Chart.js:Doughnut Chart

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

Description

Chart.js ring chart

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://code.jquery.com/jquery-git.js"></script> 
      <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js"></script> 
      <script type="text/javascript">
    $(function(){//from  w  w  w.  java2  s  . co m
var kPoints = null;
var mPoints = null;
var tPoints = null;
var cPoints = 1e-10;
var doughnutData = [{
    value: kPoints,
    color: "#FF8000"
}, {
    value: mPoints,
    color: "#99CC00"
}, {
    value: tPoints,
    color: "#0099CC"
}, {
    value: cPoints,
    color: "#333333"
}, ];
var ctx = $("#profileChart").get(0).getContext("2d");
var myDoughnut = new Chart(ctx).Doughnut(doughnutData, {
    animation: false
});
setTimeout(function () {
    // Generate a new, random value for each of the data points
    doughnutData.forEach(function (item) {
        item.value = Math.floor((Math.random() * 10) + 1);
    });
    var ctx = $("#profileChart").get(0).getContext("2d");
    var myDoughnut = new Chart(ctx).Doughnut(doughnutData);
}, 3000);
    });

      </script> 
   </head> 
   <body> 
      <canvas id="profileChart" width="400" height="400"></canvas>  
   </body>
</html>

Related Tutorials