Vogon Jeltz Vogon Jeltz - 3 months ago 39
Javascript Question

Google Line Chart start series later

I have a google chart with a number of lines on it. One of the data sets I have I only started at a much later date and as such I would like to leave it out until I have that data. However if I set the values to null or undefined google charts says that It has the wrong number of columns. Is there a way to only introduce a series at certain point through

For example I might want to use data like this below:

data = [
["col1", "col2"],
[5,null],
[4,null],
[3,1],
[2,2],
[1,3]
]


where column 2 only starts at "position" 3. This would make google charts say that row 0 has 1 column when 2 needed whereas I just want it to only start the line for column two when there is data for it.

Answer
var data = [
  ["col1", "col2"],
  [5,null],
  [4,null],
  [3,1],
  [2,2],
  [1,3]
];

seems to work here...

google.charts.load('current', {
  callback: function () {
    var data = [
      ["col1", "col2"],
      [5,null],
      [4,null],
      [3,1],
      [2,2],
      [1,3]
    ];

    var dataTable = google.visualization.arrayToDataTable(data);
    var chart = new google.visualization.LineChart(
      document.getElementById('chart_div')
    );
    chart.draw(dataTable, {
      hAxis: {
        ticks: [1,2,3,4,5]
      }
    });
  },
  packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>