do not show 0 value on google line chart - angularjs

Question

var data = google.visualization.arrayToDataTable([
['Year', 'Massachusetts', 'National'],
['2010', 88, 76],
['2011', 0, 82],
['2012', 96, 86],
['2013', 100, 91],
['2014', 0, 94],
['2015', -1, 98],
['2016', 100, 99],
['2017', 124, 100],
['2018', 125, 102]
]);
This is the data I am using to create a line chart, I do not want to show 0's and negative values on the chart. I just want to skip these values.
my current chart looks like this
Expected chart is like this

Answer 1

we can use a data view with calculated columns,
to replace values less than or equal to zero with null
var view = new google.visualization.DataView(data);
var viewColumns = [0];
for (var i = 1; i < data.getNumberOfColumns(); i++) {
addViewColumn(i);
}
view.setColumns(viewColumns);
function addViewColumn(columnIndex) {
viewColumns.push({
calc: function (dt, row) {
var valNew = null;
var valOrig = dt.getValue(row, columnIndex);
if (valOrig > 0) {
valNew = valOrig;
}
return valNew;
},
label: data.getColumnLabel(columnIndex),
type: data.getColumnType(columnIndex)
});
}
then use the following configuration option, which skips null values
interpolateNulls: true
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Year', 'Massachusetts', 'National'],
['2010', 88, 76],
['2011', 0, 82],
['2012', 96, 86],
['2013', 100, 91],
['2014', 0, 94],
['2015', -1, 98],
['2016', 100, 99],
['2017', 124, 100],
['2018', 125, 102]
]);
var view = new google.visualization.DataView(data);
var viewColumns = [0];
for (var i = 1; i < data.getNumberOfColumns(); i++) {
addViewColumn(i);
}
view.setColumns(viewColumns);
function addViewColumn(columnIndex) {
viewColumns.push({
calc: function (dt, row) {
var valNew = null;
var valOrig = dt.getValue(row, columnIndex);
if (valOrig > 0) {
valNew = valOrig;
}
return valNew;
},
label: data.getColumnLabel(columnIndex),
type: data.getColumnType(columnIndex)
});
}
var options = {
title: 'Average Home Insurance Premium',
interpolateNulls: true
};
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(view, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>