Skip to content

Instantly share code, notes, and snippets.

@nbering

nbering/app.js

Created August 16, 2014 19:17
Show Gist options
  • Save nbering/b0de4dfcc36944bdf8e8 to your computer and use it in GitHub Desktop.
Save nbering/b0de4dfcc36944bdf8e8 to your computer and use it in GitHub Desktop.
Download ZIP
Angular-Google-Chart Hide Series Example
Raw
app.js
angular.module('myApp', ['googlechart'])
.controller('myController', function($scope) {
var chart1 = {};
chart1.type = "LineChart";
chart1.displayed = false;
chart1.data = {
"cols": [
{ id: "month", label: "Month", type: "string"},
{ id: "laptop-id", label: "Laptop", type: "number"},
{ id: "desktop-id", label: "Desktop", type: "number"},
{ id: "server-id", label: "Server", type: "number"},
{ id: "cost-id", label: "Shipping", type: "number"}
],
"rows": [
{ c: [
{ v: "January"},
{ v: 19, f: "42 items"},
{ v: 12, f: "Ony 12 items"},
{ v: 7, f: "7 servers"},
{ v: 4}
]
},
{ c: [
{ v: "February"},
{ v: 13},
{ v: 1, f: "1 unit (Out of stock this month)"},
{ v: 12},
{ v: 2}
]
},
{ c: [
{ v: "March"},
{ v: 24},
{ v: 5},
{ v: 11},
{ v: 6}
]
}]
};
chart1.options = {
"title": "Sales per month",
"colors": ['#0000FF', '#009900', '#CC0000', '#DD9900'],
//defaultColors property is not part of the strandard options
//object. I've added it here to keep a backup of the original
//colors to call on when re-enabling a series.
"defaultColors": ['#0000FF', '#009900', '#CC0000', '#DD9900'],
"isStacked": "true",
"fill": 20,
"displayExactValues": true,
"vAxis": {
"title": "Sales unit",
"gridlines": {
"count": 10
}
},
"hAxis": {
"title": "Date"
}
};
//we initilize a basic view here, which the series
//hiding code will interact with.
chart1.view = {
columns: [0, 1, 2, 3, 4]
};
$scope.myChart = chart1;
$scope.seriesSelected = function(selectedItem) {
var col = selectedItem.column;
//If there's no row value, user clicked the legend.
if (selectedItem.row === null) {
//If true, the chart series is currently displayed normally. Hide it.
if ($scope.myChart.view.columns[col] == col) {
//Replace the integer value with this object initializer.
$scope.myChart.view.columns[col] = {
//Take the label value and type from the existing column.
label: $scope.myChart.data.cols[col].label,
type: $scope.myChart.data.cols[col].type,
//makes the new column a calculated column based on a function that returns null,
//effectively hiding the series.
calc: function() {
return null;
}
};
//Change the series color to grey to indicate that it is hidden.
//Uses color[col-1] instead of colors[col] because the domain column (in my case the date values)
//does not need a color value.
$scope.myChart.options.colors[col - 1] = '#CCCCCC';
}
//series is currently hidden, bring it back.
else {
//Simply reassigning the integer column index value removes the calculated column.
$scope.myChart.view.columns[col] = col;
//I had the original colors already backed up in another array. If you want to do this in a more
//dynamic way (say if the user could change colors for example), then you'd need to have them backed
//up when you switch to grey.
$scope.myChart.options.colors[col - 1] = $scope.myChart.options.defaultColors[col - 1];
}
}
};
});
Raw
index.html
<html ng-app="myApp">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="ng-google-chart.js"></script>
<title>Angular-Google-Charts Example</title>
</head>
<body>
<div ng-controller="myController">
<div google-chart chart="myChart" on-select="seriesSelected(selectedItem)"></div>
</div>
</body>
</html>
Raw
ng-google-chart.js
/**
* @description Google Chart Api Directive Module for AngularJS
* @version 0.0.10
* @author Nicolas Bouillon <[email protected]>
* @author GitHub contributors
* @license MIT
* @year 2013
*/
(function (document, window, angular) {
'use strict';
angular.module('googlechart', [])
.value('googleChartApiConfig', {
version: '1',
optionalSettings: {
packages: ['corechart']
}
})
.provider('googleJsapiUrl', function () {
var protocol = 'https:';
var url = '//www.google.com/jsapi';
this.setProtocol = function(newProtocol) {
protocol = newProtocol;
};
this.setUrl = function(newUrl) {
url = newUrl;
};
this.$get = function() {
return (protocol ? protocol : '') + url;
};
})
.factory('googleChartApiPromise', ['$rootScope', '$q', 'googleChartApiConfig', 'googleJsapiUrl', function ($rootScope, $q, apiConfig, googleJsapiUrl) {
var apiReady = $q.defer();
var onLoad = function () {
// override callback function
var settings = {
callback: function () {
var oldCb = apiConfig.optionalSettings.callback;
$rootScope.$apply(function () {
apiReady.resolve();
});
if (angular.isFunction(oldCb)) {
oldCb.call(this);
}
}
};
settings = angular.extend({}, apiConfig.optionalSettings, settings);
window.google.load('visualization', apiConfig.version, settings);
};
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.src = googleJsapiUrl;
if (script.addEventListener) { // Standard browsers (including IE9+)
script.addEventListener('load', onLoad, false);
} else { // IE8 and below
script.onreadystatechange = function () {
if (script.readyState === 'loaded' || script.readyState === 'complete') {
script.onreadystatechange = null;
onLoad();
}
};
}
head.appendChild(script);
return apiReady.promise;
}])
.directive('googleChart', ['$timeout', '$window', '$rootScope', 'googleChartApiPromise', function ($timeout, $window, $rootScope, googleChartApiPromise) {
return {
restrict: 'A',
scope: {
beforeDraw: '&',
chart: '=chart',
onReady: '&',
onSelect: '&',
select: '&'
},
link: function ($scope, $elm, $attrs) {
/* Watches, to refresh the chart when its data, formatters, options, view,
or type change. All other values intentionally disregarded to avoid double
calls to the draw function. Please avoid making changes to these objects
directly from this directive.*/
$scope.$watch(function () {
if ($scope.chart) {
return {
customFormatters: $scope.chart.customFormatters,
data: $scope.chart.data,
formatters: $scope.chart.formatters,
options: $scope.chart.options,
type: $scope.chart.type,
view: $scope.chart.view
};
}
return $scope.chart;
}, function () {
drawAsync();
}, true); // true is for deep object equality checking
// Redraw the chart if the window is resized
var resizeHandler = $rootScope.$on('resizeMsg', function () {
$timeout(function () {
// Not always defined yet in IE so check
if($scope.chartWrapper) {
drawAsync();
}
});
});
//Cleanup resize handler.
$scope.$on('$destroy', function () {
resizeHandler();
});
// Keeps old formatter configuration to compare against
$scope.oldChartFormatters = {};
function applyFormat(formatType, formatClass, dataTable) {
if (typeof($scope.chart.formatters[formatType]) != 'undefined') {
if (!angular.equals($scope.chart.formatters[formatType], $scope.oldChartFormatters[formatType])) {
$scope.oldChartFormatters[formatType] = $scope.chart.formatters[formatType];
$scope.formatters[formatType] = [];
if (formatType === 'color') {
for (var cIdx = 0; cIdx < $scope.chart.formatters[formatType].length; cIdx++) {
var colorFormat = new formatClass();
for (i = 0; i < $scope.chart.formatters[formatType][cIdx].formats.length; i++) {
var data = $scope.chart.formatters[formatType][cIdx].formats[i];
if (typeof(data.fromBgColor) != 'undefined' && typeof(data.toBgColor) != 'undefined')
colorFormat.addGradientRange(data.from, data.to, data.color, data.fromBgColor, data.toBgColor);
else
colorFormat.addRange(data.from, data.to, data.color, data.bgcolor);
}
$scope.formatters[formatType].push(colorFormat)
}
} else {
for (var i = 0; i < $scope.chart.formatters[formatType].length; i++) {
$scope.formatters[formatType].push(new formatClass(
$scope.chart.formatters[formatType][i])
);
}
}
}
//apply formats to dataTable
for (i = 0; i < $scope.formatters[formatType].length; i++) {
if ($scope.chart.formatters[formatType][i].columnNum < dataTable.getNumberOfColumns())
$scope.formatters[formatType][i].format(dataTable, $scope.chart.formatters[formatType][i].columnNum);
}
//Many formatters require HTML tags to display special formatting
if (formatType === 'arrow' || formatType === 'bar' || formatType === 'color')
$scope.chart.options.allowHtml = true;
}
}
function draw() {
if (!draw.triggered && ($scope.chart != undefined)) {
draw.triggered = true;
$timeout(function () {
if (typeof ($scope.chartWrapper) == 'undefined') {
var chartWrapperArgs = {
chartType: $scope.chart.type,
dataTable: $scope.chart.data,
view: $scope.chart.view,
options: $scope.chart.options,
containerId: $elm[0]
};
$scope.chartWrapper = new google.visualization.ChartWrapper(chartWrapperArgs);
google.visualization.events.addListener($scope.chartWrapper, 'ready', function () {
$scope.chart.displayed = true;
$scope.$apply(function (scope) {
scope.onReady({ chartWrapper: scope.chartWrapper });
});
});
google.visualization.events.addListener($scope.chartWrapper, 'error', function (err) {
console.log("Chart not displayed due to error: " + err.message + ". Full error object follows.");
console.log(err);
});
google.visualization.events.addListener($scope.chartWrapper, 'select', function () {
var selectedItem = $scope.chartWrapper.getChart().getSelection()[0];
$scope.$apply(function () {
if ($attrs.select) {
console.log('Angular-Google-Chart: The \'select\' attribute is deprecated and will be removed in a future release. Please use \'onSelect\'.');
$scope.select({ selectedItem: selectedItem });
}
else {
$scope.onSelect({ selectedItem: selectedItem });
}
});
});
}
else {
$scope.chartWrapper.setChartType($scope.chart.type);
$scope.chartWrapper.setDataTable($scope.chart.data);
$scope.chartWrapper.setView($scope.chart.view);
$scope.chartWrapper.setOptions($scope.chart.options);
}
if (typeof($scope.formatters) === 'undefined')
$scope.formatters = {};
if (typeof($scope.chart.formatters) != 'undefined') {
applyFormat("number", google.visualization.NumberFormat, $scope.chartWrapper.getDataTable());
applyFormat("arrow", google.visualization.ArrowFormat, $scope.chartWrapper.getDataTable());
applyFormat("date", google.visualization.DateFormat, $scope.chartWrapper.getDataTable());
applyFormat("bar", google.visualization.BarFormat, $scope.chartWrapper.getDataTable());
applyFormat("color", google.visualization.ColorFormat, $scope.chartWrapper.getDataTable());
}
var customFormatters = $scope.chart.customFormatters;
if (typeof(customFormatters) != 'undefined') {
for (var name in customFormatters) {
applyFormat(name, customFormatters[name], $scope.chartWrapper.getDataTable());
}
}
$timeout(function () {
$scope.beforeDraw({ chartWrapper: $scope.chartWrapper });
$scope.chartWrapper.draw();
draw.triggered = false;
});
}, 0, true);
}
}
function drawAsync() {
googleChartApiPromise.then(function () {
draw();
})
}
}
};
}])
.run(['$rootScope', '$window', function ($rootScope, $window) {
angular.element($window).bind('resize', function () {
$rootScope.$emit('resizeMsg');
});
}]);
})(document, window, window.angular);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment