Google charts (table charts)

Question

I'm trying to display table chart based on the year selected by the user. I'm not able to loop through the data.

function drawTable() {

    year = document.getElementById("thedropdown").value; 

    var data = new google.visualization.DataTable();
    data.addColumn('string','YEAR');
    data.addColumn('number', 'JAN');
    data.addColumn('number', 'FEB');
    data.addColumn('number', 'MAR');
    data.addColumn('number', 'APR');
    data.addColumn('number', 'MAY');
    data.addColumn('number', 'JUNE');
    data.addColumn('number', 'JULY');
    data.addColumn('number', 'AUG');
    data.addColumn('number', 'SEP');
    data.addColumn('number', 'OCT');
    data.addColumn('number', 'NOV');
    data.addColumn('number', 'DEC');
    data.addRows([
      ['2005',15000,20100,54637,27384,84958,43526,54637,82939,94857,53647,36456,87382],
      ['2006',13500,35464,24536,64738,53426,26373,53426,72634,53425,72837,63526,72839],
      ['2007',17567,25000,64738,83748,62536,35467,53647,54636,65748,93894,24356,21000],
      ['2008',17567,25000,64738,83748,62536,35467,53647,54636,65748,93894,24356,21000],
      ['2009',17567,25000,64738,83748,62536,35467,53647,54636,65748,93894,24356,21000],
      ['2010',17567,25000,64738,83748,62536,35467,53647,54636,65748,93894,24356,21000],
      ['2011',17567,25000,64738,83748,62536,35467,53647,54636,65748,93894,24356,21000],
      ['2012',17567,25000,64738,83748,62536,35467,53647,54636,65748,93894,24356,21000],
      ['2013',17567,25000,64738,83748,62536,35467,53647,54636,65748,93894,24356,21000],
      ['2014',17567,25000,64738,83748,62536,35467,53647,54636,65748,93894,24356,21000],      
    ]);


    var table = new google.visualization.Table(document.getElementById('table_div'));

I want to display values from JAN to Dec only for the year which the user selects. If the user selects ALL, it displays the entire table. Help me out of this.

My Html part:

<form  action="#" id="form1" name="form1" onchange="drawChart()" >
    <select id="thedropdown">
        <option value="2005">2005</option>
        <option value="2006">2006</option>
    </select>
</form>

Answer 1

you don't need to loop,
you can use data table method --> getFilteredRows
to create a filtered data view...

var view = new google.visualization.DataView(data);
if (year !== 'All') {
  view.setRows(data.getFilteredRows([{
    column: 0,
    value: year
  }]));
}

then draw the chart using the view...

google.charts.load('current', {
  packages:['table']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string','YEAR');
  data.addColumn('number', 'JAN');
  data.addColumn('number', 'FEB');
  data.addColumn('number', 'MAR');
  data.addColumn('number', 'APR');
  data.addColumn('number', 'MAY');
  data.addColumn('number', 'JUNE');
  data.addColumn('number', 'JULY');
  data.addColumn('number', 'AUG');
  data.addColumn('number', 'SEP');
  data.addColumn('number', 'OCT');
  data.addColumn('number', 'NOV');
  data.addColumn('number', 'DEC');
  data.addRows([
    ['2005',15000,20100,54637,27384,84958,43526,54637,82939,94857,53647,36456,87382],
    ['2006',13500,35464,24536,64738,53426,26373,53426,72634,53425,72837,63526,72839],
    ['2007',17567,25000,64738,83748,62536,35467,53647,54636,65748,93894,24356,21000],
    ['2008',17567,25000,64738,83748,62536,35467,53647,54636,65748,93894,24356,21000],
    ['2009',17567,25000,64738,83748,62536,35467,53647,54636,65748,93894,24356,21000],
    ['2010',17567,25000,64738,83748,62536,35467,53647,54636,65748,93894,24356,21000],
    ['2011',17567,25000,64738,83748,62536,35467,53647,54636,65748,93894,24356,21000],
    ['2012',17567,25000,64738,83748,62536,35467,53647,54636,65748,93894,24356,21000],
    ['2013',17567,25000,64738,83748,62536,35467,53647,54636,65748,93894,24356,21000],
    ['2014',17567,25000,64738,83748,62536,35467,53647,54636,65748,93894,24356,21000],
  ]);
  var table = new google.visualization.Table(document.getElementById('table_div'));
  selectYear = document.getElementById('thedropdown');
  selectYear.addEventListener('change', drawChart, false);
  drawChart();

  function drawChart() {
    var year = selectYear.value;
    var view = new google.visualization.DataView(data);
    if (year !== 'All') {
      view.setRows(data.getFilteredRows([{
        column: 0,
        value: year
      }]));
    }
    table.draw(view);
  }
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<select id="thedropdown">
  <option value="All" selected>All</option>
  <option value="2005">2005</option>
  <option value="2006">2006</option>
  <option value="2007">2007</option>
  <option value="2008">2008</option>
  <option value="2009">2009</option>
</select>
<div id="table_div"></div>