raphael concentric pie chart

A simple way how you can create concentric pie 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, 0,200, 0,0], fill:'#44f', stroke:0}).animate(
    Raphael.animation({arc:[300,300, 0,200, 0,90], stroke: 1},450));
var arc2 = r.path().attr({arc:[300,300, 0,200, 90,90], fill:'#f44', stroke:0}).animate(
    Raphael.animation({arc:[300,300, 0,200, 90,270], stroke: 1},900).delay(450));
var arc3 = r.path().attr({arc:[300,300, 0,200, 270,270], fill:'#4f4', stroke:0}).animate(
    Raphael.animation({arc:[300,300, 0,200, 270,360], stroke: 1},450).delay(1350));

var arc2a = r.path().attr({arc:[300,300, 200,250, 90,90], fill:'#f66', stroke:0}).animate(
    Raphael.animation({arc:[300,300, 200,250, 90,120], stroke: 1},150).delay(450));
var arc2b = r.path().attr({arc:[300,300, 200,250, 120,120], fill:'#f66', stroke:0}).animate(
    Raphael.animation({arc:[300,300, 200,250, 120,180], stroke: 1},300).delay(600));
var arc2c = r.path().attr({arc:[300,300, 200,250, 180,180], fill:'#f66', stroke:0}).animate(
    Raphael.animation({arc:[300,300, 200,250, 180,270], stroke: 1},450).delay(900));