Doughnut Chart

A simple way how you can create Doughnut Chart charts and animate them

by Arpit Agrawal

HTML

<div id="canvas"></div>

JavaScript

var r = Raphael(0,0,'100%','100%');

function D(angle) {return angle * (180 / Math.PI);}
function R(angle) {return angle * (Math.PI / 180);}

r.customAttributes.arc = function(x,y,r1,r2,start,end){
  start-=90; end-=90;
  var f = ((end - start) > 180) ? 1 : 0;
  var sx1 = x + r1 * Math.cos(R(start));
  var sy1 = y + r1 * Math.sin(R(start));
  var ex1 = x + r1 * Math.cos(R(end));
  var ey1 = y + r1 * Math.sin(R(end));
  var sx2 = x + r2 * Math.cos(R(start));
  var sy2 = y + r2 * Math.sin(R(start));
  var ex2 = x + r2 * Math.cos(R(end));
  var ey2 = y + r2 * Math.sin(R(end));
  var path =[ 
      ["M" , ex1 , ey1 ],
      ["A" , r1  , r1 , 0 , f , 0 , sx1 , sy1],
      ["L" , sx2 , sy2 ],
      ["A" , r2  , r2 , 0 , f , 1 , ex2 , ey2],
      ["L" , ex1 , ey1 ],
      ["Z"]
      ];
    return {path:path};
    
}


var arc1 = r.path().attr({arc:[300,300, 100,150, 0,0], fill:'#44f', stroke:0}).animate(
    Raphael.animation({arc:[300,300, 100,150, 0,280], stroke: 1},1000,'bounce'));