title: toggling series of google chart on and off by clicking on legend
body: <p>I have an area chart that has 6 series. I want the user to be able to click on the legend to toggle the visibility of a series.</p>
  
  <p>I found <a href="http://jsfiddle.net/asgallant/6gz2Q/" rel="nofollow noreferrer">this example</a> &amp; have tried including it in my code below but nothing happens. Before adding this code if I clicked on one of the series in the legend the series would become thicker, then click on it again &amp; it would go back to normal, believe this is some default behaviour. However with this code included once the series gets thicker I can't do anything, i.e. zoom or click on the chart to get the value of a point.</p>
  
  <p>Not sure what I am missing? </p>
  
  <p><strong>Update</strong></p>
  
  <p>I have also tried following this <a href="https://stackoverflow.com/questions/22777344/google-charts-api-show-hide-series-on-legend-click-how">post</a> but same result.</p>
  
  <p><strong>latest update</strong></p>
  
  <p>I have changed my code to the following. </p>
  
  <p>The error I'm getting now is the following...</p>
  
  <p><em>Uncaught Error: Invalid column index 8. Should be an integer in the range [0-7].
      at gvjs_en (jsapi_compiled_default_module.js:75)
      at gvjs_P.gvjs_.uc (jsapi_compiled_default_module.js:92)
      at gvjs_P.gvjs_.Za (jsapi_compiled_default_module.js:91)
      at Data.displayed.reduce (jScore.js:220)
      at Array.reduce ()
      at vparse (jScore.js:214)
      at showHideSeries (jScore.js:202)
      at gvjs_Zn. (jsapi_compiled_default_module.js:179)
      at gvjs__n (jsapi_compiled_default_module.js:129)
      at gvjs_Zn.gvjs_.dispatchEvent (jsapi_compiled_default_module.js:127)</em></p>
  
  <p>My HTML</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"&gt;&lt;/script&gt;
  &lt;script src="scripts/jScore.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      google.charts.load('current', { 'packages': ['corechart', 'table'] });
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="chartScore" style="height:1000px"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My JS file</p>
  
  <pre><code>var MyData = {};
  
  $(document).ready(function () {
  
  $.ajax({
      type: 'GET',
      url: 'api/Score',
      dataType: 'json',
      success: function (data) {
          MyData.dataValues = data;
          PopulateData();
          DrawChartScores();
      },
      error: function () {
          alert("Error loading data! Please try again");
      }
  });
  
  };
  
  
  var Data = {};
  
  function PopulateData() {
  
  Data = {
      displayed: [...MyData.dataValues],
      hidden: Object.keys(MyData.dataValues[0]).reduce((a, c) =&gt; {
          a[c] = false;
          return a;
      }, {}),
      map: Object.keys(MyData.dataValues[0])
  };
  }
  
  function DrawChartScores() {
  
   var dataValues = MyData.dataValues;
   var data = new google.visualization.DataTable();
   var options = {
      title: 'Scores', width: '80%', height: '80%',
      explorer:
          {
              keepInBounds: true,
              actions: ['dragToZoom', 'rightClickToReset']
          },
      series: Data.map.reduce((a, c, i) =&gt; {
          a[i] = {};
          return a;
      }, {})
    };
  
  data.addColumn('date', 'Day');
  data.addColumn('number', 'A');
  data.addColumn('number', 'B');
  data.addColumn('number', 'C');
  data.addColumn('number', 'D');
  data.addColumn('number', 'E');
  data.addColumn('number', 'F');
  data.addColumn('number', 'Nrs');
  
  // add data
  for (var i = 0; i &lt; dataValues.length; i++) {
      data.addRow([new Date(dataValues[i].DateRet), dataValues[i].A, dataValues[i].B, dataValues[i].C,
          dataValues[i].D, dataValues[i].E, dataValues[i].F, dataValues[i].Nrs]);
  }
  
  var chart = new google.visualization.AreaChart(document.getElementById('chartScore'));
  var last = {
      column: true,
      row: true
    };
  
   function showHideSeries() {
      var sel = chart.getSelection();
  
      if (sel.length === 0 &amp;&amp; last.row === null) {
          Data.hidden[Data.map[last.column]] = !Data.hidden[Data.map[last.column]];
      } else if (sel.length &amp;&amp; sel[0].row === null) {
          // toggle the current item selected
          Data.hidden[Data.map[sel[0].column]] = !Data.hidden[Data.map[sel[0].column]];
          last = sel[0];
      } else {
          return;
      }
  
      vparse(data);
      options = vkillLegend(options);
      chart.draw(data, options);
  
     };
  
  google.visualization.events.addListener(chart, 'select', showHideSeries);
  chart.draw(data, options);
  
  };
  
  function vparse(data) {
   Data.displayed.reduce((a, c, i) =&gt; {
      for (let k in c) {
          if (k === "DateRet") continue;
          if (Data.hidden[k])
              data.setValue(i, Data.map.indexOf(k), null);
          else
              data.setValue(i, Data.map.indexOf(k), c[k]);
      }
      return true;
  }, []);
  return data;
  }
  
  function vkillLegend(options) {
   options.series = Object.keys(options.series).reduce((a, c, i) =&gt; {
      let current = {};
      if (Data.hidden[Data.map[i]]) current.color = "#CCCCCC";
      else c.color = null;
      a[i - 1] = current;
      return a;
  }, {});
  return options;
  };
  </code></pre>