Google charts - Hide columns

HTML

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

  <button type="button" id="hideSales">Hide Sales</button>
  <button type="button" id="hideExpenses">Hide Expence</button>

</body>

JavaScript

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

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2004', 1000, 400],
      ['2005', 1170, 460],
      ['2006', 660, 1120],
      ['2007', 1030, 540]
    ]);
    var options = {
      title: 'Company Performance'
    };
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

    chart.draw(data, options);


    var hideSal = document.getElementById("hideSales");
    hideSal.onclick = function() {
      view = new google.visualization.DataView(data);
      view.hideColumns([1]);
      chart.draw(view, options);
    }
    var hideExp = document.getElementById("hideExpenses");
    hideExp.onclick = function() {
      view = new google.visualization.DataView(data);
      view.hideColumns([2]);
      chart.draw(view, options);
    }


  }