Google charts - Toggle columns on legend click

by katalin_2003

HTML

<script src="https://www.google.com/jsapi?fake=.js"></script>
<div id="chart_div" style="width: 100%; height: 500px;"></div>

JavaScript

google.load("visualization", "1", {
    packages: ["corechart"]
  });
  google.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2017', 1000, 400],
      ['2018', 1170, 460],
      ['2019', 660, 1120],
      ['2020', 1030, 540]
    ]);
    var options = {
      title: 'Company Performance',

    };
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(data, options);

    var columns = [];
    var series = {};
    for (var i = 0; i < data.getNumberOfColumns(); i++) {
      columns.push(i);
      if (i > 0) {
        series[i - 1] = {};
      }
    }
    console.log(series)


    google.visualization.events.addListener(chart, 'select', function() {
      var sel = chart.getSelection();
      // if selection length is 0, we deselected an element
      if (sel.length > 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
            console.log(data.getColumnLabel(col), data.getColumnType(col))
            columns[col] = {
              label: data.getColumnLabel(col),
              type: data.getColumnType(col),
              calc: function() {
                return null;
              }
            };

            columns.push(i);
            if (i > 0) {
              series[i - 1] = {};
            }
          }
          var view = new google.visualization.DataView(data);
          view.setColumns(columns);
          chart.draw(view, options);
        }
      }
    });

  }