Accepted answer

Found the answer,

The Ajax results has to be parsed first.

resulting fix

var barChartData = JSON.parse(d);


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.


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({....


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


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


running the following worked for me:

window.onload = function () {



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]

  <script src=""></script>


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


Related Query

More Query from same tag