window.onload = function() {
(
function() {
pie('mydata',300,300);
}
)()
}
function pie(table_id, width, height,id) {
var data_table = document.getElementById(table_id);
//document.body.innerHTML = '<canvas id="canvas" height="300" width="300"></canvas>';
var canvas = document.getElementById('canvas');
//document.createElement('canvas'); ne marche pas sous IE :(
// canvas.id = id;
//canvas.height=height;
//canvas.width=width;
var td_index = 1;
var tds, data = [], color, colors = [], value = 0, total = 0;
var trs = data_table.getElementsByTagName('tr');
for (var i = 0; i < trs.length; i ) {
tds = trs[i].getElementsByTagName('td');
if (tds.length === 0) continue;
value = parseFloat(tds[td_index].innerHTML);
data[data.length] = value;
total = value;
color = getColor();
colors[colors.length] = color;
trs[i].style.backgroundColor = color;
}
if (typeof canvas.getContext === 'undefined') return;
var ctx = canvas.getContext('2d');
var canvas_size = [canvas.width, canvas.height];
var radius = Math.min(canvas_size[0], canvas_size[1]) / 2;
var center = [canvas_size[0]/2, canvas_size[1]/2];
var sofar = 0;
for(var y =Math.min(canvas_size[0], canvas_size[1]) / 10 ; y >= 0; y--)
{
ctx.save();
ctx.translate(0,y);
ctx.scale(1,0.55);
for (var piece in data) {
var thisvalue = data[piece] / total;
ctx.beginPath();
ctx.moveTo(center[0], center[1]);
ctx.arc(center[0],
center[1],
radius,
Math.PI * (- 0.5 2 * sofar),
Math.PI * (- 0.5 2 * (sofar thisvalue)),
false
);
ctx.lineTo(center[0], center[1]);
ctx.closePath();
if(y == 0) {
ctx.globalAlpha = 1;
ctx.fillStyle = colors[piece];
ctx.fill();
}
else if(y < 2) {
ctx.globalAlpha = 0.2;
ctx.fillStyle = '#000';
ctx.fill();
}
else {
ctx.globalAlpha = 0.6;
ctx.fillStyle = colors[piece];
ctx.fill();
}
sofar = thisvalue;
}
ctx.restore();
}
function getColor() {
var rgb = [];
for (var i = 0; i < 3; i )
rgb[i] = Math.round(100 * Math.random() 155);
return 'rgb(' rgb.join(',') ')';
}
document.body.appendChild(canvas);
}
