Chartjs.ng.js

define( [
	"angular",
	"qvangular",
	'//cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1-beta.2/Chart.min.js'
],
// inspired from here : https://github.com/petermelias/angular-chartjs
function (
	angular,
	qvangular
) { 
	var chartTypes = {
		line: 'Line',
		bar: 'Bar',
		radar: 'Radar',
		polar: 'PolarArea',
		pie: 'Pie',
		doughnut: 'Doughnut'
	};

	var makeChartDirective = function (chartType) {
      var upper = chartType.charAt(0).toUpperCase() + chartType.slice(1);
      qvangular.directive('qChart' + upper, [ function () {
        return  ChartFact(chartType);
      }]);
    };
	
	for (var c in chartTypes) { makeChartDirective(c);}	

	var ChartFact = function (chartType) {
			chartType = chartTypes[chartType];
			var extractSpecOpts = function (opts, attrs) {
				var extracted = {}, k, c;
				for (k in opts) {
					c = attrs[k];
					if (typeof(c) !== 'undefined') { extracted[k] = c; }
				}
				return extracted;
			};
			if (typeof(chartType) === 'undefined') { return; }
			return {
				restrict: 'EAC',
				template: '<div><canvas class="cjs-chart"></canvas><legend class="cjs-legend"></legend></div>',
				replace: true,
				scope: {
					dataset: '=',
					options: '='
				},
				link: function postLink(scope, element, attrs) {
					var ctx = element[0].children[0].getContext('2d'),
					chart = new Chart(ctx),
					chartOpts = {};
					
					angular.extend(
						chartOpts, 
						Chart.defaults.global,
						Chart.defaults[chartType]
					);

					angular.extend(
						chartOpts, 
						scope.options,
						extractSpecOpts(
							chartOpts,
							attrs
						)
					);
					
					chart = chart[chartType](scope.dataset, chartOpts);
					element[0].children[1].innerHTML = chart.generateLegend();
					
					scope.$watch('dataset', function (newData, oldData) {
						chart.initialize(newData);
					}, true);

					scope.$watch('options', function (newData, oldData) {
						angular.extend(
							chart.options, 
							scope.options
						);
					}, true);
				}
			};
		};	
} );