5

I have a line chart, h-axis is date, v-axis is double. I need to display two lines:

lineA: [
    [2016-1-1 00:00, 1.1]
    [2016-2-1 00:00, 1.1]
    [2016-3-1 00:00, 1.1]
]
lineB: [
    [2016-1-1 00:00, 2.1]
    [2016-2-1 08:00, 2.1]
    [2016-3-1 00:00, 2.1]
]

To display the data on the chart, I need to combine these two lines and pass the result to arrayToDataTable.

combine: [
    [2016-1-1 00:00, 1.1, 2.1],
    [2016-2-1 00:00, 1.1, null],
    [2016-2-1 08:00, null, 2.1],
    [2016-3-1 00:00, 1.1, 2.1],
]

As a result of the above, I am getting gaps on the lines. How can I solve this issue? Is it possible to pass two individual sets, one for each line? All the examples I have found require them to be merged as the combine table.

I need to keep the nulls when provided as part of line1 and line2 table

WhiteHat
  • 59,912
  • 7
  • 51
  • 133
Giannis
  • 5,286
  • 15
  • 58
  • 113
  • You need to consider only the date part. Try check http://stackoverflow.com/questions/2698725/comparing-date-part-only-without-comparing-time-in-javascript – Nizam Jan 20 '17 at 15:55
  • Time is important, I can't drop it. – Giannis Jan 20 '17 at 15:56

1 Answers1

5

use the following option to fill in gaps created by null values 

interpolateNulls: true

EDIT

see following working snippet... 

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      [new Date(2016, 0, 1), 1.1, 2.1],
      [new Date(2016, 1, 1), 1.1, null],
      [new Date(2016, 1, 1, 8), null, 2.1],
      [new Date(2016, 2, 1), 1.1, 2.1]
    ], true);

    var options = {
      interpolateNulls: true
    };

    var container = document.body.appendChild(document.createElement('div'));
    var chart = new google.visualization.LineChart(container);
    chart.draw(data, options);
  },
  packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
WhiteHat
  • 59,912
  • 7
  • 51
  • 133
  • I need to keep the nulls when they are provided as part of the line1 and line2 table ... :'( – Giannis Jan 20 '17 at 15:57
  • interpolateNulls will ignore cases where I have null on purpose (there are cases where line1 / line2 will have null, and there needs to be a gap. – Giannis Jan 20 '17 at 16:27
  • only option sounds like leaving `interpolateNulls: false` and filling in the blanks manually... – WhiteHat Jan 20 '17 at 17:07
  • I was hoping I was missing some knowledge on a different approach of rendering two lines. Thank you for the help – Giannis Jan 20 '17 at 17:09