How to create discontinuous line chart with Google Chart - charts

Question

I want to create a discontinuous line chart like this.
To draw the chart I wrote like this.
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Number');
data.addRows([
[new Date(2017, 1, 20), 460],
[new Date(2017, 1, 27), 579],
[new Date(2017, 1, 27), null],
[new Date(2017, 2, 1), 679],
[new Date(2017, 2, 6), 352]
]);
var linearOptions = {
title: 'Discontinuous Line Chart'
};
var linearChart = new google.visualization.LineChart(document.getElementById('linear_div'));
linearChart.draw(data, linearOptions);
}
I had to put a null value data to make it separate.
Is there a way to draw a chart like above from a data like these?
data.addRows([
[new Date(2017, 1, 20), 460, true],
[new Date(2017, 1, 27), 579, false],
[new Date(2017, 2, 1), 679, true],
[new Date(2017, 2, 6), 352, true]
]);
This is a source code in jsfiddle.
https://jsfiddle.net/7jkmovqs/

Answer 1

you can use a 'style' column role...
use stroke-opacity: 0.0; to create a gap in the line
see following working snippet...
here, null results in the default style...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Number');
data.addColumn({role: 'style', type: 'string'});
data.addRows([
[new Date(2017, 1, 20), 460, null],
[new Date(2017, 1, 27), 579, null],
[new Date(2017, 2, 1), 679, 'line {stroke-opacity: 0.0;}'],
[new Date(2017, 2, 6), 352, null]
]);
var linearOptions = {
title: 'Discontinuous Line Chart'
};
var linearChart = new google.visualization.LineChart(document.getElementById('linear_div'));
linearChart.draw(data, linearOptions);
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="linear_div"></div>
note: there is a column role for 'certainty' that takes a boolean value...
data.addRows([
[new Date(2017, 1, 20), 460, true],
[new Date(2017, 1, 27), 579, false],
[new Date(2017, 2, 1), 679, true],
[new Date(2017, 2, 6), 352, true]
]);
but this will make the line dashed...