/* 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(); }); } }; });