Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Multiple lines in Google Charts with different number of datasets

In Google Charts I want to display 3 different lines. But they do not have the same number of data points.

The following Image was made with Excel Chart, so that you can understand my problem better.

Line grey has only two data points, the orange line goes until 5 and the blue one has full data set.

So now to my real project: in Google Chart I tried the same, so my dataArray looks like that (with 4 lines):

["20180629", 24.5, 28, 27.52, 24.6],
["20180630", 23, 28, 23.57, 24.4],
["20180701", 22.6, 26, 23, 23.5],
["20180702", 23, 25, 22.44, 23.5],
["20180703", 25.1, 28, 24.43, 26.3],
["20180704", 27.6, 30, 24.59, 21.4],
["20180705", 28.9, 24.1, 23.8, ],
["20180706", 24.4, , , ],
["20180707", 23.7, , , ],
["20180708", 24.8, , , ]  

So you can see, that from 20180629 to 20180704 there is the full data set, in 20180705 is one missing and in 20180707 and 20180708 are 3 missing.

It is no opportunity, to display a 0 there, because this would show wrong temperature charts.

The Chrome Console shows this error:

Uncaught (in promise) Error: Row given with size different than 5 (the number of columns in the table).

enter image description here

like image 963
MAESTRO_DE Avatar asked Oct 23 '25 14:10

MAESTRO_DE


1 Answers

you can use null in place of the empty data points...

["20180629", 24.5, 28, 27.52, 24.6],
["20180630", 23, 28, 23.57, 24.4],
["20180701", 22.6, 26, 23, 23.5],
["20180702", 23, 25, 22.44, 23.5],
["20180703", 25.1, 28, 24.43, 26.3],
["20180704", 27.6, 30, 24.59, 21.4],
["20180705", 28.9, 24.1, 23.8, null],
["20180706", 24.4, null, null, null],
["20180707", 23.7, null, null, null],
["20180708", 24.8, null, null, null]

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ["20180629", 24.5, 28, 27.52, 24.6],
    ["20180630", 23, 28, 23.57, 24.4],
    ["20180701", 22.6, 26, 23, 23.5],
    ["20180702", 23, 25, 22.44, 23.5],
    ["20180703", 25.1, 28, 24.43, 26.3],
    ["20180704", 27.6, 30, 24.59, 21.4],
    ["20180705", 28.9, 24.1, 23.8, null],
    ["20180706", 24.4, null, null, null],
    ["20180707", 23.7, null, null, null],
    ["20180708", 24.8, null, null, null]
  ], true);

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
like image 146
WhiteHat Avatar answered Oct 26 '25 03:10

WhiteHat



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!