score:6

Accepted answer

Found the answer,

The Ajax results has to be parsed first.

resulting fix 

var barChartData = JSON.parse(d);

score:0

It looks like you're using an object that doesn't exist, well at least I cant see it, datasets. I can only see length being called on this object, unless there's missing code?

I can see you assign d to barChartData

var barChartData = d;

So, you might want to replace the instances of datasets with barChartData.

score:0

It's an old question but, I had this issue as well and in my case my data was length = 0. I solved this just adding a validation before calling the the graph:

if (barChartData.length > 0)
{
   objChart = Morris.Bar({....
}

score:2

You may try putting the Chart.JS script tag and other custom JS scripts just before the end of **<**/body> tag.

score:4

For other users who have this problem, make sure your container canvas element exists, when called upon.

score:4

running the following worked for me:

window.onload = function () {

}

score:15

The problem is that when your code executes, the canvas has not been created yet. You should wrap your code inside a function and assign that function to window.onload event. You can see the sample code below.

window.onload = function() {
  var ctx = document.getElementById("myChart");
  var lineChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
      datasets: [{
        label: "2015",
        data: [10, 8, 6, 5, 12, 8, 16, 17, 6, 7, 6, 10]
      }]
    }
  })
}
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>

</head>

<body>
  <canvas id="myChart"></canvas>
</body>

</html>


Related Query

More Query from same tag