HTML and CSS Reference
In-Depth Information
})
$("table tr:gt(1)").each(function (i, v) {
sectorColors[i] = $(this).children("td:eq(2)").text();
})
//draw title
context.textAlign = "center";
context.font = "bold 30px Arial";
context.shadowColor = "silver";
context.shadowOffsetX = 2;
context.shadowOffsetY = 2;
context.fillStyle = "black";
context.illText($("#txtTitle").val(), 300,50 );
context.restore();
//draw sectors
var total = 0;
for (var i = 0; i < sectorValues.length; i++) {
total += sectorValues[i];
}
var angle = 0;
for (var i = 0; i < sectorValues.length; i++) {
context.fillStyle = sectorColors[i];
context.beginPath();
context.moveTo(170, 250);
context.arc(170, 250, 150, angle, angle + (Math.PI * 2 *
(sectorValues[i] / total)), false);
context.lineTo(170, 250);
context.fill();
context.stroke();
angle += Math.PI * 2 * (sectorValues[i] / total);
}
//draw legends
var offset = 150;
for (var i = 0; i < sectorColors.length; i++) {
context.fillStyle = sectorColors[i];
context.font = 'bold 12px Arial';
context.save();
context.shadowColor = "silver";
context.shadowOffsetX = 2;
context.shadowOffsetY = 2;
context.fillRect(400, offset, 20, 15);
context.restore();
context.textBaseline = "middle";
context.fillText(sectorNames[i] + ' - ' + sectorValues[i] + '%', 425, offset + 10);
offset += 30;
}
});
