﻿var PieChart=new Class({options:{pieChartRadius:100,td_label_index:0,td_index:1},initialize:function(options){this.setOptions(options);this.pieChartRadius=this.options.pieChartRadius;this.pieChartDiameter=this.pieChartRadius*2;this.pieVertices=12;this.arcIncrementMultiplier=1/this.pieVertices;this.index=0;this.tableIndex=1;this.areaIndex=1;this.canvas='';this.container='';this.data_table='';$$('.pieChart').each(function(el){this.insertElements(el);this.makePieChart(el);}.bind(this));this.addToolTips();},insertElements:function(el){this.container=new Element('div',{id:'pieChartContainer'+this.tableIndex}).injectBefore($(el)).addClass('pieChartContainer');this.data_table=el.clone().injectBottom(this.container);el.dispose();new Element('div',{id:'pieChartWrapper'+this.tableIndex}).injectTop(this.container).addClass('pieChartWrapper');this.canvas=new Element('canvas',{id:'canvas'+this.tableIndex,width:this.pieChartDiameter,height:this.pieChartDiameter}).injectInside(this.container.getElement('.pieChartWrapper')).addClass('pieChartCanvas');new Element('map',{id:'pieChartMap'+this.tableIndex,name:'pieChartMap'+this.tableIndex}).injectBottom(this.container).addClass('pieChartMap');new Asset.image('assets/spacer.gif',{alt:'',usemap:'#pieChartMap'+this.tableIndex,width:this.pieChartDiameter,height:this.pieChartDiameter}).injectInside(this.container.getElement('.pieChartWrapper')).setStyles({'width':this.pieChartDiameter,'height':this.pieChartDiameter});new Element('div').injectBottom(this.container).addClass('clear');},makePieChart:function(){var tds,data=[],color,colors=[],label,labels=[],value=0,values=[],total=0;var trs=this.data_table.getElementsByTagName('tr');for(var i=0;i<trs.length;i++){tds=trs[i].getElementsByTagName('td');if(tds.length===0)continue;label=tds[this.options.td_label_index].innerHTML;labels[colors.length]=label;value=parseFloat(tds[this.options.td_index].innerHTML);values[colors.length]=value;total+=value;color=this.getColor(i,trs.length);colors[colors.length]=color;trs[i].style.backgroundColor=color;}
var ctx=this.canvas.getContext('2d');var tableLength=colors.length;for(piece=0;piece<tableLength;piece++){var thisvalue=values[piece]/total;var arcStartAngle=Math.PI*(-0.5+2*this.index);var arcEndAngle=Math.PI*(-0.5+2*(this.index+thisvalue));ctx.beginPath();ctx.moveTo(this.pieChartRadius,this.pieChartRadius);ctx.arc(this.pieChartRadius,this.pieChartRadius,this.pieChartRadius,arcStartAngle,arcEndAngle,false);ctx.closePath();ctx.fillStyle=colors[piece];ctx.fill();ctx.lineWidth=1;ctx.beginPath();ctx.moveTo(this.pieChartRadius,this.pieChartRadius);ctx.arc(this.pieChartRadius,this.pieChartRadius,this.pieChartRadius,arcStartAngle,arcEndAngle,false);ctx.closePath();ctx.strokeStyle="#FFF";ctx.stroke();var arcIncrement=(arcEndAngle-arcStartAngle)*this.arcIncrementMultiplier;var xx=this.pieChartRadius+Math.round(Math.cos(arcStartAngle)*this.pieChartRadius);var yy=this.pieChartRadius+Math.round(Math.sin(arcStartAngle)*this.pieChartRadius);var coord=[];var coordIndex=1;for(i=0;i<((this.pieVertices*2)-2);i=i+2){var arcAngle=arcStartAngle+arcIncrement*coordIndex;coord[i]=this.pieChartRadius+Math.round(Math.cos(arcAngle)*this.pieChartRadius);coord[i+1]=this.pieChartRadius+Math.round(Math.sin(arcAngle)*this.pieChartRadius);coordIndex++;}
var xxEnd=this.pieChartRadius+Math.round(Math.cos(arcEndAngle)*this.pieChartRadius);var yyEnd=this.pieChartRadius+Math.round(Math.sin(arcEndAngle)*this.pieChartRadius);var myArea='area'+this.tableIndex+'-'+piece;new Element('area',{'id':myArea,'shape':'poly','coords':this.pieChartRadius+','+this.pieChartRadius+','+xx+','+yy+','+coord.join(',')+','+xxEnd+','+yyEnd,'title':labels[piece]+'::'+values[piece]+'%'}).injectInside(this.container.getElement('.pieChartMap'));this.index+=thisvalue;}
this.tableIndex++;},addToolTips:function(){new Tips($$(document.getElementsByTagName('area')),{showDelay:10,className:'tool-tip',hideDelay:10});},getColor:function(i,totalSteps){var colori=i*100/totalSteps;var frequency=Math.PI*2/totalSteps;var center=190;var amplitude=60;var rgb=[];rgb[0]=Math.round(Math.sin(frequency*i+0)*amplitude+center);rgb[1]=Math.round(Math.sin(frequency*i+2)*amplitude+center);rgb[2]=Math.round(Math.sin(frequency*i+4)*amplitude+center);return'rgb('+rgb.join(',')+')';}});PieChart.implement(new Options);window.addEvent('domready',function(){new PieChart();});
