Robware/scripts/directives/googleChart.js

/* global google, angular */

angular.module("robware").directive('googleChart', function() {
	return {
		restrict: 'E',
		templateUrl: '/scripts/directives/templates/googleChart.html',
		scope: {
			data: '=',
			headings: '=?',
			ignore: '=?',
			height: '='
		},
		link: function(scope, element, attributes) {
			var chartLoaded = false;

			if (!scope.headings)
				scope.headings = [];

			if (!scope.ignore)
				scope.ignore = [];

			var chartData, chart;
			var chartOptions = {
				title: attributes.title,
				height: scope.height || 400,
				curveType: attributes.curveType,
				legend: {
					position: attributes.legendPosition || 'right'
				},
				vAxis: {
					title: attributes.vAxisTitle
				},
				backgroundColor: attributes.background || 'transparent'
			};
			
			function formatToolTip(input, args) {
				return input.replace(/{(.+?)(:.*?)?}/g, function(match, index, format) {
					if (format)
						format = format.slice(1);
					if (args[index]===undefined)
						return match;
					if (isNumber(args[index]))
						return args[index].toString(format, true);
					return args[index].toString(format);
				});
			}
			
			function shouldIgnore(value){
				return scope.ignore.indexOf(value)>-1;
			}

			function setupChart() {
				if (!chartLoaded)
					return;

				var firstRow = scope.data[0];
				var fields = {};
				for (var propertyName in firstRow) {
					if (shouldIgnore(propertyName))
						continue;
					
					var datum = firstRow[propertyName];
					var type = typeof (datum);
					if (type === "object")
						type = datum.constructor.name;
					fields[propertyName] = {
						title: scope.headings[propertyName] || propertyName,
						type: type.toLowerCase()
					};
				}

				chartData = new google.visualization.DataTable();
				angular.forEach(fields, function(value) {
					chartData.addColumn(value.type, value.title);
					if (attributes['toolTip' + value.title.upperCaseFirst()])
						chartData.addColumn({type: 'string', role: 'tooltip'});
				});

				angular.forEach(scope.data, function(value) {
					var row = [];
					angular.forEach(value, function(value2, index) {
						if (shouldIgnore(index))
							return;
					
						row.push(value2);
						var attrIndex = 'toolTip' + index.upperCaseFirst();
						if (attributes[attrIndex])
							row.push(formatToolTip(attributes[attrIndex], value));
					});
					chartData.addRow(row);
				});

				chart = new google.visualization.LineChart(element[0]);
				drawChart();
			}

			function drawChart() {
				chart.draw(chartData, chartOptions);
			}

			$.getScript("https://www.google.com/jsapi", function() {
				//google.load('visualization', '1.1', {packages: ['line'], callback:function(){
				google.load('visualization', '1', {
					packages: ['corechart'],
					callback: function() {
						chartLoaded = true;
						setupChart();
					}
				});
			});

			scope.$watch("data", function(v) {
				setupChart();
			});

			angular.element(window).bind('resize', function() {
				drawChart();
			});
		}
	};
});