google chart with multiple dates

Question

I have multiple collections of data I want to display in a single google chart. Each series is a collection of CPM's with a date:

for instance:

series A[
  '2016-09-01' => 2.08023,
  '2016-09-04' => 2.01123
];

series B[
  '2016-09-01' => 1.99324,
  '2016-09-02' => 2.00112
];

Note that the dates in the two series are not the same. I want to draw these two graphs in a single google graph. How should I format the data rows (if this is possible at all).

I have made a JSFiddle with what I thought would be a way to go, but adding a null in the data table doesn't work, I get two dots for the first series where I'm expecting a line. How can I make google chart draw the line instead of the dots?

WhiteHat WhiteHat · Accepted Answer · 2016-09-06T12:43:48

in the fiddle, the data is setup correctly

however, since there is a null value is Series A due to the different dates

need to use configuration option interpolateNulls: true

from the documentation...

interpolateNulls
Whether to guess the value of missing points. If true, it will guess the value of any missing data based on neighboring points. If false, it will leave a break in the line at the unknown point.

see following working snippet...

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'X');
  data.addColumn('number', 'series a');
  data.addColumn('number', 'series b')
  data.addRows([
    [new Date( 1472688000000 ), 2.08023, 1.99324],
    [new Date( 1472774400000 ), null,    2.00112],
    [new Date( 1472947200000 ), 2.01123, null]
  ]);

  var options = {
    interpolateNulls: true
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.LineChart(container);
  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

google chart with multiple dates

1 Answers