ChartJS Doughnut chart

by dhavaljani

HTML

<canvas id="canvas" height="300" width="300"></canvas>

<h3 id="demo">

</h3>

CSS

#demo {
  text-align: center;
  font-family: sans-serif;
}

JavaScript

/*Enter the values for your chart calculation*/

//replace values in ytdValue = 27.2
//replace values in targetValue = 22
var ytdValue = 27.2, targetValue = 22;

var percent = Math.round( (ytdValue*100) / targetValue);

document.getElementById("demo").innerHTML = "percent " + percent;
//code for chart
$(document).ready(function () {
    var pieData = [
        {
          value: percent,//enter first value for the chart
          color:"#3F9F3F"
        },
        {
          value : 100-percent,//enter 100 - first value here
          color : "#222"
        }
      ];

    var myPie = new Chart(document.getElementById("canvas").getContext("2d")).Doughnut(pieData,{percentageInnerCutout : 80});
});

/*!
 * Chart.js
 * http://chartjs.org/
 *
 * Copyright 2013 Nick Downie
 * Released under the MIT license
 * https://github.com/nnnick/Chart.js/blob/master/LICENSE.md
 */

//Define the global Chart Variable as a class.
window.Chart = function(context){

    var chart = this;


    //Easing functions adapted from Robert Penner's easing equations
    //http://www.robertpenner.com/easing/

    var animationOptions = {
        linear : function (t){
            return t;
        },
        easeInQuad: function (t) {
            return t*t;
        },
        easeOutQuad: function (t) {
            return -1 *t*(t-2);
        },
        easeInOutQuad: function (t) {
            if ((t/=1/2) < 1) return 1/2*t*t;
            return -1/2 * ((--t)*(t-2) - 1);
        },
        easeInCubic: function (t) {
            return t*t*t;
        },
        easeOutCubic: function (t) {
            return 1*((t=t/1-1)*t*t + 1);
        },
        easeInOutCubic: function (t) {
            if ((t/=1/2) < 1) return 1/2*t*t*t;
            return 1/2*((t-=2)*t*t + 2);
        },
        easeInQuart: function (t) {
            return t*t*t*t;
        },
        easeOutQuart: function (t) {
            return -1 * ((t=t/1-1)*t*t*t - 1);
        },
        easeInOutQuart: function (t) {
      ...