Google Charts: "Cannot read property 'getTime' of null" when I only have 1 row of data

Question

I am using Google Charts to generate charts with javascript. It works fine when I set multiple rows of data into my data array, but it does not work when I only have 1 row of data. Then I get the error "Cannot read property 'getTime' of null".

This array works fine:

[

 ["Date", "Amount"]

 [Wed Oct 20 2019 00:00:00 GMT+200 (Mitteleuropäische Sommerzeit), 9576]

 [Wed Oct 21 2019 00:00:00 GMT+200 (Mitteleuropäische Sommerzeit), 4810]

 [Wed Oct 22 2019 00:00:00 GMT+200 (Mitteleuropäische Sommerzeit), 5058]

 [Wed Oct 23 2019 00:00:00 GMT+200 (Mitteleuropäische Sommerzeit), 5381]

]

This array does not work:

[

 ["Date", "Amount"]

 [Wed Oct 16 2019 00:00:00 GMT+200 (Mitteleuropäische Sommerzeit), 51099]

]

Ofcourse date is a date object.

// Set chart style
switch(chart_style) {
    case "linien":
        google.charts.load('current', {packages:['corechart'], 'language': 'de'});
        break;
    case "timeseries":
        google.charts.load('current', {packages:['annotationchart'], 'language': 'de'});
        break;
    case "spalten":
        google.charts.load('current', {packages:['corechart'], 'language': 'de'});
        break;
    case "tabelle":
        google.charts.load('current', {packages: ['table'], 'language': 'de'});
        break;
    default:
        google.charts.load('current', {packages:['corechart'], 'language': 'de'});
}

google.charts.setOnLoadCallback(drawChart);

function drawChart() {

    var data = google.visualization.arrayToDataTable(dataArray);

    var options = {
        displayAnnotations: true,
        animation:{
            duration: 600,
            easing: 'out',
            startup: true
        },
        //theme: 'material',
        curveType: 'function',
        legend: { position: 'right' },
        hAxis: {title: hAxisTitle, format: hAxisFormat},
        vAxis: {title: "Besuchermenge für Abfrage", minValue: 0, maxValue: 0},
        pointSize: 5,
        series: {
            0: { color: '#1f4e79'},
            1: { color: '#FF8C00'},
            },
        explorer: {
            axis: 'horizontal',
            keepInBounds: false,
            maxZoomIn:0.1,
            maxZoomOut:4
        },
        language: 'de'
    };

    switch(chart_style) {
        case "linien":
            var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
            break;
        case "timeseries":
            var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));
            break;
        case "spalten":
            var chart = new google.visualization.ColumnChart(document.getElementById("chart_div"));
            break;
        case "tabelle":
            var chart = new google.visualization.Table(document.getElementById("chart_div"));
            break;
        default:
            var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
        }

    chart.draw(data, options);
}

Since I need at least 10 reputation to post images, I can only post links to the screenshots.

Screenshot of the array that works: https://i.sstatic.net/VrySV.png

Screenshot of the working chart: https://i.sstatic.net/oqokM.png

Screenshot of the array that does not work: https://i.sstatic.net/bVT6B.png

Screenshot of the chart with the array that does not work: https://i.sstatic.net/y30Hq.png

I would have expected the chart to show the single column in the middle, with the date under it as the x axis label.

Answer 1

this looks like some sort of bug.

as a work around, you can check the number of rows,
if there is only one, add an empty row to the data table.
this will allow the chart to draw properly.
you may also want to add a tick, else it will just display a wide range of years...

var ticks = null;
if (data.getNumberOfRows() === 1) {
  data.addRow([null, null]);
  ticks = [data.getValue(0, 0)];
}

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
      ["Date", "Amount"],
      [new Date(2019, 9, 16), 51099]
  ]);

  var ticks = null;
  if (data.getNumberOfRows() === 1) {
    data.addRow([null, null]);
    ticks = [data.getValue(0, 0)];
  }

  console.log('abc');

  var options = {
      displayAnnotations: true,
      animation:{
          duration: 600,
          easing: 'out',
          startup: true
      },
      //theme: 'material',
      curveType: 'function',
      legend: { position: 'right' },
      hAxis: {title: 'Title', format: 'MM/dd/yy', ticks: ticks},
      vAxis: {title: "Besuchermenge für Abfrage", minValue: 0, maxValue: 0},
      pointSize: 5,
      series: {
          0: { color: '#1f4e79'},
          1: { color: '#FF8C00'},
      },
      explorer: {
          axis: 'horizontal',
          keepInBounds: false,
          maxZoomIn:0.1,
          maxZoomOut:4
      },
      language: 'de'
  };

  var chart = new google.visualization.ColumnChart(document.getElementById("chart_div"));
  chart.draw(data, options);
});

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