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

Question

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.

Answer 1

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>