CODEWITHSUNDEEP
google-visualization
Vlad Vladimir Hercules
Vlad Vladimir Hercules

Reputation: 1859

Hide rows that only have visible null values (Google Charts - Table View)

I have developed a feature which allows the user to hide/show columns. One thing that Google Charts does is list all rows in the list even if the visible row has null values. Is there a way to automatically hide rows that don't have any data in them? I have attached a screenshot to demonstrate rows with null values.

enter image description here

Upvotes: 1

Views: 745

Answers (1)

WhiteHat
WhiteHat

Reputation: 61212

you can use data table method --> getFilteredRows()

the method returns an array of row indexes that match the criteria,
the following will return the row where the second column is not null... 

var nonBlankRows = data.getFilteredRows([{
  column: 1,
  test: function(value, row, column, table) {
    return (value !== null);
  }
}]);

you can then use the returned array in a data view or chart wrapper,
see following working snippet, which uses both... 

google.charts.load('current', {
  packages: ['controls', 'table']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Time');
  data.addColumn('string', 'Data');
  data.addRows([
    [new Date(2017, 11, 20), 'TEST 0'],
    [new Date(2017, 11, 21), null],
    [new Date(2017, 11, 22), null],
    [new Date(2017, 11, 23), null],
    [new Date(2017, 11, 24), null],
    [new Date(2017, 11, 25), null],
    [new Date(2017, 11, 26), 'TEST 1'],
    [new Date(2017, 11, 27), null],
    [new Date(2017, 11, 28), null],
    [new Date(2017, 11, 29), 'TEST 2']
  ]);

  var nonBlankRows = data.getFilteredRows([{
    column: 1,
    test: function(value, row, column, table) {
      return (value !== null);
    }
  }]);

  var options = {
    showRowNumber: true,
    allowHtml: true
  };

  var chartWrapper = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'wrapper-table',
    dataTable: data,
    options: options,
    view: {
      rows: nonBlankRows
    }
  });
  chartWrapper.draw();

  var view = new google.visualization.DataView(data);
  view.setRows(nonBlankRows);

  var chart = new google.visualization.Table(document.getElementById('chart-table'));
  chart.draw(view, options);
});
.table {
  display: inline-block;
  margin: 6px;
  padding: 6px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="table">
  <div id="wrapper-table"></div>
</div>
<div class="table">
  <div id="chart-table"></div>
</div>

Upvotes: 1

Related Questions