gistfile1.js

/*
atrs:
size, lineWidth, bg, bc, val
*/
app.directive('clDonut', function() {
	return {
		restrict: 'E',
		template: '<canvas></canvas>',
		replace: true,
		link: function(scope, el, attrs) { 
			var w = attrs.size;
			el.attr('width', w);
			el.attr('height', w);

			var defaults = {
				bg: '#CCCCCC',
				color: '#000000'
			};
      
			var c = el.get(0).getContext("2d");

			var v = attrs.val || 0;

			var lineWidth = attrs.lineWidth ? attrs.lineWidth : w/5.714285714285714;

			var w2 = w / 2;
			var radius = w2 - lineWidth / 2;

			var angleArc = 360 * Math.PI / 180;
			var startAngle = 1.5 * Math.PI;
			var endAngle = 1.5 * Math.PI + angleArc;

			var angle = v*angleArc/100;

			var ea = startAngle+angle;

			c.lineWidth = lineWidth;

			var render = function() {
				c.beginPath();
					c.strokeStyle = attrs.bg ? attrs.bg : defaults.bg;
					c.arc(w2, w2, radius, endAngle, startAngle, true);
				c.stroke();

				c.beginPath();
					c.strokeStyle = attrs.bc ? attrs.bc : defaults.color;
					c.arc(w2, w2, radius, startAngle, ea, false);
				c.stroke();
			}

			attrs.$observe('val', function() {
				render();
			});

			render();

		}
	}
});