highcharts directive

highcharts.js

'use strict';

angular.module('highcharts',[])

.directive('chart', function () {
	return {
		restrict: 'E',
		scope: {
			data: "="
		},
		replace: true,
		template: "<div></div>",
		transclude: true,
		link: function (scope, element, attrs) {
			var chartsDefaults = {
				chart: {
					renderTo: element[0],
					type: attrs.type || null,
					height: attrs.height || null,
				}
			};

			var drawChart = function() {
				var newSettings = {};
				angular.extend(newSettings, chartsDefaults, scope.data);
				var chart = new Highcharts.Chart(newSettings);
			};

			// Highcharts has to be redrawn everytime there's new data.
			scope.$watch('data', function(value) {
				if(!value)
					return;

				drawChart();
			}, true);
		}
	};
});