Uncaught TypeError: Cannot read property 'getTime' of undefined in CanvasJS

Question

I am facing an issue when updating the datapoints of CanvasJS chart, and the error message says

“Uncaught TypeError: Cannot read property ‘getTime’ of undefined”.

I tried also make it an object like this

var parLabels = JSON.stringify(labels);     
var obj = JSON.parse(parLabels);

It still didn't work.

index.html

<div id="chartContainer" style="height: 300px; width: 100%;"></div>

<script type="text/javascript>
$(function() {
  google.script.run.withSuccessHandler(showDaily).getData();
});
function showDaily(myObj) {
  var email = myObj.email;
  var entity = myObj.entity;
  var entity = JSON.parse(entity);
  var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
  var labels = '';
  for (var i = 1; i < entity.length; i++) {
    var month = new Date(entity[i][0]).getMonth();
    var day = new Date(entity[i][0]).getDate();
    var date = day + " " + monthNames[month];
    var score = entity[i][7];
    if (entity[i][2] != '') {
      if (labels != "") {
        labels = labels + ",{label:" + date + ",y:" + score + "}";
      } else {
        labels = "{label:" + date + ",y:" + score + "}";
      }
    }
  }
  var chart = new CanvasJS.Chart("chartContainer", {
    title: {
        text: "My First Chart in CanvasJS"              
    },
    data: [              
    {
        // Change type to "doughnut", "line", "splineArea", etc.
        type: "line",
        dataPoints: [ labels ]
    }
    ]
  });
  chart.render();
}

</script>

You can't pass class objects from Apps Script to HtmlService. So send your dates as milliseconds. — tehhowch, Oct 16 '18 at 15:08
Possible duplicate of [Chart data exported to an Apps Script webapp is null](https://stackoverflow.com/questions/50686187/chart-data-exported-to-an-apps-script-webapp-is-null) — tehhowch, Oct 16 '18 at 15:09

score 3 · Accepted Answer · answered Oct 17 '18 at 04:44

In CanvasJS, dataPoints should be an array of objects. But in your case, it seems to be a string. Try changing labels to an array and passing it to dataPoints should work fine.

var labels = [];
for (var i = 1; i < entity.length; i++) {
    var month = new Date(entity[i][0]).getMonth();
    var day = new Date(entity[i][0]).getDate();
    var date = day + " " + monthNames[month];
    var score = entity[i][7];
    if (entity[i][2] != '') {   
        labels.push({label: date, y: score });
    }
}

then pass it as dataPoints: labels.

It works!! Thanks @Vishwas for helping me solve this one. – Newbie Oct 17 '18 at 11:00 — Newbie, Oct 17 '18 at 11:00

score 1 · Answer 2 · edited Jan 08 '20 at 13:28

Change this line

google.charts.load('current', {packages: ['corechart']});

To

google.charts.load('45', {packages: ['corechart']});

The first argument to google.charts.load is the version name or number, as a string.
If you specify 'current', this causes the latest official release of Google Charts to be loaded.
If you want to try the candidate for the next release, use 'upcoming' instead.
In general there will be very little difference between the two, and they'll be completely identical except when a new release is underway.

This issue is resolved in version 45.

score -1 · Answer 3 · answered Mar 03 '20 at 04:18

This happens to me when I have only 1 dataPoint. It seems to be a bug in version 46, 47 so downgrading to version 45 (as @Pranjali Rastogi suggests) works for me.

Another workaround for me is to specify hAxis.viewWindow.min and hAxis.viewWindow.max so that the chart can "zoom out" to show multiple hAxis ticks.

Uncaught TypeError: Cannot read property 'getTime' of undefined in CanvasJS

3 Answers3