mirror of
https://github.com/Oreolek/ifhub.club.git
synced 2024-07-18 14:24:28 +03:00
232 lines
7.4 KiB
JavaScript
232 lines
7.4 KiB
JavaScript
/*
|
|
Script: piechart.js
|
|
|
|
Dependencies:
|
|
mootools-beta-1.2b2.js
|
|
moocanvas.js
|
|
|
|
Author:
|
|
Greg Houston, <http://greghoustondesign.com/>
|
|
|
|
Credits:
|
|
Based on Stoyan Stefanov's Canvas Pie:< http://www.phpied.com/canvas-pie/>
|
|
Color algorithm inspired by Jim Bumgardner:<http://www.krazydad.com/makecolors.php>
|
|
|
|
License:
|
|
MIT License, <http://en.wikipedia.org/wiki/MIT_License>
|
|
|
|
Example Usage:
|
|
|
|
<table class="pieChart">
|
|
<tr><th>Browser</th> <th>Value</th></tr>
|
|
<tr><td>Safari </td> <td>180 </td></tr>
|
|
<tr><td>Firefox</td> <td>210 </td></tr>
|
|
<tr><td>IE </td> <td>30 </td></tr>
|
|
<tr><td>Opera </td> <td>120 </td></tr>
|
|
</table>
|
|
|
|
*/
|
|
|
|
|
|
var PieChart = new Class({
|
|
options: {
|
|
pieChartRadius: 60, // Half the width of your pie chart
|
|
td_label_index: 0, // which TD contains the label
|
|
td_index: 1, // which TD contains the data
|
|
index: 1
|
|
},
|
|
initialize: function(elData,el,options){
|
|
this.setOptions(options);
|
|
|
|
// Initialize variables
|
|
this.pieChartRadius = this.options.pieChartRadius;
|
|
this.pieChartDiameter = this.pieChartRadius * 2;
|
|
this.pieVertices = 12; // Does not include the center vertex
|
|
this.arcIncrementMultiplier = 1 / this.pieVertices;
|
|
this.index = 0;
|
|
this.tableIndex = this.options.index;
|
|
this.areaIndex = 1;
|
|
this.canvas = '';
|
|
this.container = '';
|
|
this.data_table = '';
|
|
|
|
|
|
this.insertElements(el);
|
|
aData=this.makeData(elData);
|
|
this.makePieChart(aData);
|
|
this.addToolTips();
|
|
},
|
|
insertElements: function(el){
|
|
|
|
///// STEP 1 - Insert HTML Elements
|
|
|
|
// Insert a div that will contain both the pie chart and it's legend
|
|
this.container = new Element('div', {
|
|
id: 'pieChartContainer' + this.tableIndex
|
|
}).injectBefore($(el)).addClass('pieChartContainer');
|
|
|
|
// Pull the table out of the page and put it in the pie chart container
|
|
this.data_table = el.clone().injectBottom(this.container);
|
|
el.dispose();
|
|
|
|
// Insert a div that will contain both the pie chart canvas and it's image map overlay
|
|
new Element('div', {
|
|
id: 'pieChartWrapper' + this.tableIndex
|
|
}).injectTop(this.container).addClass('pieChartWrapper');
|
|
|
|
// Insert the canvas to draw the pie on
|
|
this.canvas = new Element('canvas', {
|
|
id: 'canvas' + this.tableIndex,
|
|
width: this.pieChartDiameter,
|
|
height: this.pieChartDiameter
|
|
}).injectInside(this.container.getElement('.pieChartWrapper')).addClass('pieChartCanvas');
|
|
|
|
// Insert the map element. The area elements will be added later
|
|
new Element('map', {
|
|
id: 'pieChartMap' + this.tableIndex,
|
|
name: 'pieChartMap' + this.tableIndex
|
|
}).injectBottom(this.container).addClass('pieChartMap');
|
|
|
|
// Insert the blank transparent gif that is used for the image map
|
|
new Asset.image(DIR_STATIC_SKIN+'/images/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
|
|
});
|
|
|
|
// Insert a div to insure layout integrity
|
|
new Element('div').injectBottom(this.container).addClass('clear');
|
|
|
|
},
|
|
makeData: function(elData) {
|
|
var aData=[];
|
|
elData.getChildren().each(function(el) {
|
|
var data=el.getChildren();
|
|
if ($(data[0])) {
|
|
var color = data[0].getStyle('background').match(/#\w+/i);
|
|
aData.extend([{
|
|
'label': el.get('text'),
|
|
'value': data[1].get('text'),
|
|
'color': data[0].getStyle('background').match(/#\w+/i)[0]
|
|
}]);
|
|
}
|
|
});
|
|
return aData;
|
|
},
|
|
makePieChart: function(aData){
|
|
|
|
///// STEP 2 - Get the data
|
|
var data = [], color, colors = [], labels = [], values = [], total = 0, value=0;
|
|
aData.each(function(item, index){
|
|
labels[colors.length] = item.label;
|
|
value=parseFloat(item.value);
|
|
values[colors.length] = value;
|
|
total += value;
|
|
colors[colors.length] = item.color.hexToRgb();
|
|
},this);
|
|
|
|
///// STEP 3 - Draw pie on canvas
|
|
|
|
// get canvas context, determine radius and center
|
|
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); // -0.5 sets set the start to be top
|
|
var arcEndAngle = Math.PI * (- 0.5 + 2 * (this.index + thisvalue));
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(this.pieChartRadius, this.pieChartRadius); // Center of the pie
|
|
ctx.arc( // draw next arc
|
|
this.pieChartRadius,
|
|
this.pieChartRadius,
|
|
this.pieChartRadius,
|
|
arcStartAngle,
|
|
arcEndAngle,
|
|
false
|
|
);
|
|
ctx.closePath();
|
|
ctx.fillStyle = colors[piece]; // Color
|
|
ctx.fill();
|
|
|
|
// Draw the same thing again to draw stroke properly in IE
|
|
ctx.lineWidth = 1;
|
|
ctx.beginPath();
|
|
ctx.moveTo(this.pieChartRadius, this.pieChartRadius);
|
|
|
|
ctx.arc( // draw next arc
|
|
this.pieChartRadius,
|
|
this.pieChartRadius,
|
|
this.pieChartRadius,
|
|
arcStartAngle,
|
|
arcEndAngle,
|
|
false
|
|
);
|
|
ctx.closePath();
|
|
ctx.strokeStyle = "#FFF";
|
|
ctx.stroke();
|
|
|
|
///// STEP 4 - Draw pie on image map
|
|
|
|
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]
|
|
}).injectInside(this.container.getElement('.pieChartMap'));
|
|
|
|
this.index += thisvalue; // increment progress tracker
|
|
}
|
|
|
|
this.tableIndex++;
|
|
|
|
},
|
|
addToolTips: function(){
|
|
|
|
///// STEP 5 - Add Tooltips
|
|
|
|
new Tips($$(document.getElementsByTagName('area')), {
|
|
showDelay: 10,
|
|
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); |