angular-google-chart-hide-series-example.js

/*
#########
 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];
    }
  }
};