HTML5 : Graph Pie

Your browser does not support the canvas element.


function arcCal(data){ return (Math.PI * 2 * (1 - data)); }

function GraphPie(config)
{
this.canvas = document.getElementById(config.canvasId);
this.context = this.canvas.getContext('2d');
this.context.strokeStyle = "#000000";
this.context.scale(1,0.5);

this.centerYThick = config.thickness;
this.radian = config.radian;

this.centerX = this.canvas.width/2;

this.centerYStart = this.canvas.height + (this.centerYThick/2);
this.centerYEnd = this.centerYStart - this.centerYThick;

this.centerYStep = parseInt(this.centerYThick / 20);
this.Distance = this.radian * 0.06;
}

GraphPie.prototype.getData = function(){
this.arguCount = arguments.length;
this.arcArray = Array(this.arguCount + 1);

this.dataSum = 0;
for(var i = 0;i < this.arguCount;i++){ this.dataSum += arguments[i]; }

this.dataCollect = 0;
for(var i = 0;i <= this.arguCount;i++)
{
this.arcArray[i] = arcCal(this.dataCollect/this.dataSum);
this.dataCollect += arguments[i];
}
}

GraphPie.prototype.getColor = function(){
this.colorArray = Array('#FFFF00','#FF0000','#0000FF','#00FF00','#FF00FF','#00FFFF','silver','orange','gray','black');
if(arguments.length) for(var i = 0;i < arguments.length;i++){ this.colorArray[i] = arguments[i]; }
}

GraphPie.prototype.drawPie = function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height * 2);

for(this.centerY = this.centerYStart;this.centerY >= this.centerYEnd;this.centerY -= this.centerYStep)
{
for(var i = 1;i <= this.arguCount;i++) if(this.arcArray[i - 1] > this.arcArray[i])
{
this.arcCenter = (this.arcArray[i - 1] + this.arcArray[i])/2;
this.centerXi = this.centerX + (this.Distance * Math.cos(this.arcCenter));
this.centerYi = this.centerY + (this.Distance * Math.sin(this.arcCenter));

this.context.fillStyle = this.colorArray[i - 1];

this.context.beginPath();
this.context.arc(this.centerXi,this.centerYi,this.radian,this.arcArray[i - 1],this.arcArray[i],true);
this.context.lineTo(this.centerXi,this.centerYi);
this.context.closePath();
this.context.stroke();
this.context.fill();
}
}
}

window.onload = function(){
var myGraphPie = new GraphPie({
canvasId: 'example',
radian: 200,
thickness: 100
});

myGraphPie.getData(700,500,250,150,100,500);
myGraphPie.getColor();
myGraphPie.drawPie();

myGraphPie = null;
}