How to skip empty rows from displaying in a google bar chart? - charts

Question

I find that empty rows are being displayed too in a google bar chart.

Answer 1

You could exclude empty rows from google.visualization.DataTable like this:
function excludeEmptyRows(dataTable)
{
var view = new google.visualization.DataView(dataTable);
var rowIndexes = view.getFilteredRows([{column: 1, maxValue: 0}]); //get rows with 0 values
view.hideRows(rowIndexes); //hide empty rows
return view.toDataTable();
}
Example
google.load('visualization', '1', {packages: ['corechart', 'bar']});
google.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = google.visualization.arrayToDataTable([
['City', '2010 Population',],
['New York City, NY', 8175000],
['Los Angeles, CA', 3792000],
['Chicago, IL', 2695000],
['Houston, TX', 2099000],
['Philadelphia, PA', 1526000],
['---', 0]
]);
var options = {
title: 'Population of Largest U.S. Cities',
chartArea: {width: '50%'},
hAxis: {
title: 'Total Population',
minValue: 0
},
vAxis: {
title: 'City'
},
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(excludeEmptyRows(data), options);
}
function excludeEmptyRows(dataTable)
{
var view = new google.visualization.DataView(dataTable);
var rowIndexes = view.getFilteredRows([{column: 1, maxValue: 0}]); //get rows with 0 values
view.hideRows(rowIndexes); //hide empty rows
return view.toDataTable();
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>