title: Google Charts API: Show/Hide Series on Legend Click. How?
body: <p>I found the following code online and would like to adapt it to my existing code.</p>
  
  <p>Here's the <strong>code to show/hide data series</strong> on click I found:</p>
  
  <p><a href="http://jsfiddle.net/asgallant/6gz2Q/">http://jsfiddle.net/asgallant/6gz2Q/</a> </p>
  
  <p><strong>Here's my Adaptation so far:</strong></p>
  
  <pre><code>function drawChart() {
      var data = new google.visualization.arrayToDataTable([
  
        ['Draw', '1997', '1998'],
        ['1', 1236777, 1408007],
        ['2', 834427, 572882],
        ['3', 2164890, 1614181],
        ['4', 1893574, 3897171],
        ['5', 2851881, 673906],
        ['6', 359504, 630853]
  
      ]);
  
  
      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  
      // create columns array
      var columns = [];
      // display these data series by default
      var defaultSeries = [1];
      var series = {};
      for (var i = 0; i &lt; data.getNumberOfColumns(); i++) {
          if (i == 0 || defaultSeries.indexOf(i) &gt; -1) {
              // if the column is the domain column or in the default list, display the series
              columns.push(i);
          }
          else {
              // otherwise, hide it
              columns[i] = {
                  label: data.getColumnLabel(i),
                  type: data.getColumnType(i),
                  calc: function () {
                      return null;
                  }
              };
          }
          if (i &gt; 0) {
              // set the default series option
              series[i - 1] = {};
              if (defaultSeries.indexOf(i) == -1) {
                  // backup the default color (if set)
                  if (typeof(series[i - 1].color) !== 'undefined') {
                      series[i - 1].backupColor = series[i - 1].color;
                  }
                  series[i - 1].color = '#CCCCCC';
              }
          }
      }
  
          // Options customize what goes inside our chart.
          var options = {
  
            fontName: 'verdana',
            fontSize: 12,
  
            // Curve the series line.
            curveType: "function",
  
            title: 'Title of Chart',
  
            // disables tooltip on hover data points
            enableInteractivity: true,
  
            // Enable/Disable tooltip. selection or none.
            tooltip: { trigger: 'none' },
  
            // Select multiple Data points.
            selectionMode: 'multiple',
  
            // Customize vAxis ---------------------------------------------------------
            vAxis: {
  
              gridlines: {color: 'black', count: 5},
  
              title: 'Title of vAxis',
  
              // Affects only the Title. eg. Not title.
              titleTextStyle: {fontName: 'verdana', fontSize: 10, color: 'black', bold: false, italic: false},
  
              // Range of data for vAxis eg. min: 0, max:9
              viewWindow: {min: 0, max: 5006386},
  
              // Affects only the Range. eg. Not title.
              textStyle: {fontName: 'verdana', fontSize: 12, color: 'black', bold: false, italic: false}
            },
  
            // Customize hAxis ---------------------------------------------------------
            hAxis: {
  
              title: 'Title of hAxis',
  
              // Affects only the Title. eg. Not title.
              titleTextStyle: {fontName: 'verdana', fontSize: 10, color: 'black', bold: false, italic: false},
  
              // Affects only the Range. eg. Not title.
              textStyle: {fontName: 'verdana', fontSize: 10, color: 'black', bold: false, italic: false}
            },
  
            // Customize Series ---------------------------------------------------------
            series: {
              0: {lineWidth: 1, pointSize: 4},
              1: {lineWidth: 1, pointSize: 4},
              2: {lineWidth: 1, pointSize: 4}
            },
  
            // Customize Annotations ---------------------------------------------------------
            annotations: {
              textStyle: {fontName: 'verdana', fontSize: 10, color: 'black', bold: false, italic: false, auraColor: 'none'}
            },
  
            // Custome Legends ---------------------------------------------------------
            legend: {
  
              // Position top, right, bottom, left.
              position: 'top',
  
              // Align at the star, center or end.
              alignment: 'start',
  
              // Affects only the Range. eg. Not title.
              textStyle: {fontName: 'verdana', fontSize: 10, color: 'black', bold: false, italic: false}
            }
  
          }; // End Options
  
      function showHideSeries () {
          var sel = chart.getSelection();
          // if selection length is 0, we deselected an element
          if (sel.length &gt; 0) {
              // if row is undefined, we clicked on the legend
              if (sel[0].row == null) {
                  var col = sel[0].column;
                  if (columns[col] == col) {
                      // hide the data series
                      columns[col] = {
                          label: data.getColumnLabel(col),
                          type: data.getColumnType(col),
                          calc: function () {
                              return null;
                          }
                      };
  
                      // grey out the legend entry
                      series[col - 1].color = '#CCCCCC';
                  }
                  else {
                      // show the data series
                      columns[col] = col;
                      series[col - 1].color = null;
                  }
                  var view = new google.visualization.DataView(data);
  
                  view.setColumns(columns);
                  chart.draw(view, options);
              }
          }
      }
  
      google.visualization.events.addListener(chart, 'select', showHideSeries);
  
      // create a view with the default columns
      var view = new google.visualization.DataView(data);
      view.setColumns(columns);
      chart.draw(view, options);
  }
  
  google.load('visualization', '1', {packages: ['corechart']});
  google.setOnLoadCallback(drawChart);
  </code></pre>
  
  <p><strong>...And here is what I really wanted to figure how to incorporate into this code. I can't seem to figure it out. It's driving me nuts!</strong></p>
  
  <pre><code>// Declare our Columns and set types, roles, etc.
  view.setColumns([
      0,
      1, { calc: "stringify", sourceColumn: 1, type: "string", role: "annotation" },
      2, { calc: "stringify", sourceColumn: 2, type: "string", role: "annotation" },
      3, { calc: "stringify", sourceColumn: 3, type: "string", role: "annotation" }
  
  ]);
  </code></pre>