CODEWITHSUNDEEP
chartsgoogle-visualization
Ole Haugset
Ole Haugset

Reputation: 3797

Google Line Chart show date range even with 'null' values

Im having some issues figuring out how to have my Google Line Chart displaying the given date range in its data array, when it all contains null values from a given point.

I have specified data for 1 month, but I only got data up until 2th December. This causes the chart to automatically zoom its view from 12th November up until that date, and truncate the 10 last days.

This is my data:

enter image description here

And this is the chart as it is being displayed:

enter image description here

I could however change the null values to 0, but that would make the lines flatline for the rest of the days, and thats not optimal. However, I do want to visualize to the user, that there are no recorded data for those last 10 days.

Any help would be much appreciated

Upvotes: 3

Views: 2887

Answers (1)

WhiteHat
WhiteHat

Reputation: 61275

to fill the gaps from null values,
set option: 

interpolateNulls: true

to set a specific date range on the x-axis,
use option: 

hAxis: {
  viewWindow: {
    min: beginDate,
    max: endDate
  }
}

see following working snippet... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'x');
  data.addColumn('number', 'y');
  data.addRows([
    [new Date(2017, 11, 5), 3],
    [new Date(2017, 11, 6), 4],
    [new Date(2017, 11, 7), 4],
    [new Date(2017, 11, 8), 3],
    [new Date(2017, 11, 9), null],
    [new Date(2017, 11, 10), 4],
    [new Date(2017, 11, 11), null],
    [new Date(2017, 11, 12), 4]
  ]);

  var options = {
    interpolateNulls: true,
    hAxis: {
      viewWindow: {
        max: new Date(2017, 11, 31)
      }
    }
  };

  var chart = new google.visualization.LineChart(
    document.getElementById('chart_div')
  );
  chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 4

Related Questions