Demo — Pie Chart Generation

oCanvas can be used for a lot of things, one of them being charts. This is an example of how a pie chart can be generated for the percentages defined in the variable data in the beginning. Moving over the pieces will make the piece larger and clicking the pieces will make them animate.

View Example

Code

var canvas = oCanvas.create({
	canvas: "#canvas",
	background: "#222",
	fps: 60
});

var data = [25, 65, 10];

var prototype = canvas.display.arc({
	x: canvas.width / 2,
	y: canvas.height / 2,
	radius: 150,
	pieSection: true
});

var pieces = [], end, lastEnd;
for (var i = 0; i < data.length; i++) {

	end = (i > 0 ? lastEnd : 0) + 360 / (100 / data[i]) - (i < 1 ? 90 : 0);

	pieces.push(prototype.clone({
		start: (i < 1 ? -90 : lastEnd),
		end: end,
		fill: "hsl(195, "+ (100 - i*10) +"%, "+ (50 - i*10) +"%)"
	}));

	canvas.addChild(pieces[i]);
	lastEnd = end;

	pieces[i]._start = pieces[i].start;
	pieces[i]._end = pieces[i].end;

	pieces[i].bind("mouseenter touchenter", function () {
		this.radius = 154;
		canvas.redraw();
	}).bind("mouseleave touchleave", function () {
		this.radius = 150;
		canvas.redraw();
	}).bind("click tap", function () {
		for (var i = 0; i < pieces.length; i++) {
			pieces[i].animate({
				start: 0,
				end: 0,
				opacity: 0
			}, 500, function () {
				this.animate({
					start: this._start,
					end: this._end,
					opacity: 1
				}, 500);
			});
		}
	});
}

Output