Last active
August 29, 2015 14:02
-
-
Save nbering/3ba0847f4c2e58fb16c4 to your computer and use it in GitHub Desktop.
Using chart select event to hide a selected chart series using angular-google-charts.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
######### | |
Notes: | |
######### | |
- $scope.saleschart is the chart object passed to the directive. | |
- $scope.saleschart.data is and instance of google.visualization.DataTable, giving it access to that class's member functions. | |
I also discovered that being an instance of the Chart API class allows access to the functions, but results in and field or | |
property being obfuscated. Calling .toJSON() gives a JSON object of the DataTable, which helps in debugging... but I just | |
don't trust any names other than functions. | |
- $scope.saleschart.view.columns starts as an array like [0,1,2,3,4,5]. Having fewer values than the number of columns would | |
not produce an error, having a number >= the number of columns would cause the chart not to be displayed. | |
- The HTML looks like this: | |
<div id="chartdiv" google-chart chart="saleschart" select="seriesSelected(selectedItem)"></div> | |
*/ | |
$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.saleschart.view.columns[col] == col) { | |
//Replace the integer value with this object initializer. | |
$scope.saleschart.view.columns[col] = { | |
//Take the label value and type from the existing column. | |
label: $scope.saleschart.data.getColumnLabel(col), | |
type: $scope.saleschart.data.getColumnType(col), | |
//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.saleschart.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.saleschart.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.saleschart.options.colors[col-1] = $scope.saleschart.options.defaultColors[col-1]; | |
} | |
} | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment