title: Chart Js Cannot read property 'length' of undefined
body: <p>Using Chart js I am trying to pull data from Ajax call to supply to the Chart. 
  I found a few other postings where people have suggested delaying the canvas load but nothing has seemed to work. Currently this is the what I have below and the error that I get is </p>
  
  <p><a href="https://i.stack.imgur.com/6FnW7.png"><img src="https://i.stack.imgur.com/6FnW7.png" alt="enter image description here"></a></p>
  
  <pre><code>$(function () {
  
  GetChartData();
  
      function GetChartData() {
      $.ajax({
          url: ajaxURL,
          method: 'GET',
          dataType: 'json',
          success: function (d) {
              //-------------
              //- BAR CHART -
              //-------------
              var barChartData = d;
              var barChartCanvas = $("#barChart").get(0).getContext("2d");
              var barChart = new Chart(barChartCanvas);
              // console.log(datajson);
              //barChartData.datasets[1].fillColor = "#00a65a";
              //barChartData.datasets[1].strokeColor = "#00a65a";
              //barChartData.datasets[1].pointColor = "#00a65a";
              var barChartOptions = {
                  //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
                  //scaleBeginAtZero: true,
                  //Boolean - Whether grid lines are shown across the chart
                  scaleShowGridLines: true,
                  //String - Colour of the grid lines
                  scaleGridLineColor: "rgba(0,0,0,.05)",
                  //Number - Width of the grid lines
                  scaleGridLineWidth: 1,
                  //Boolean - Whether to show horizontal lines (except X axis)
                  scaleShowHorizontalLines: true,
                  //Boolean - Whether to show vertical lines (except Y axis)
                  scaleShowVerticalLines: true,
                  //Boolean - If there is a stroke on each bar
                  barShowStroke: true,
                  //Number - Pixel width of the bar stroke
                  barStrokeWidth: 2,
                  //Number - Spacing between each of the X value sets
                  barValueSpacing: 5,
                  //Number - Spacing between data sets within X values
                  barDatasetSpacing: 1,
                  multiTooltipTemplate: "&lt;%=datasetLabel%&gt;: &lt;%= value + ' %' %&gt;",
                  //String - A legend template
                  legendTemplate: "&lt;ul class=\"&lt;%=name.toLowerCase()%&gt;-legend\"&gt;&lt;% for (var i=0; i&lt;datasets.length; i++){%&gt;&lt;li&gt;&lt;span style=\"background-color:&lt;%=datasets[i].fillColor%&gt;\"&gt;&lt;/span&gt;&lt;%if(datasets[i].label){%&gt;&lt;%=datasets[i].label%&gt;&lt;%}%&gt;&lt;/li&gt;&lt;%}%&gt;&lt;/ul&gt;",
                  //Boolean - whether to make the chart responsive
                  responsive: true,
                  maintainAspectRatio: true
              };
  
  
              barChartOptions.datasetFill = false;
              barChart.Bar(barChartData, barChartOptions);
  
  
          }
      });
      }
  });
  </code></pre>
  
  <p><strong>UPDATE HERE SHOWING HOW NON AJAX WORKS</strong></p>
  
  <p>The below code is taking the results of the Ajax get request (which I got from dumping it to the console) and creating a "hard coded" version of the same thing. The only thing that should technically be different is one has the data loaded at time of the page and the second the data is loaded very briefly after. </p>
  
  <pre><code> var chartData = {
      "labels": [
        "April"
      ],
      "datasets": [
        {
            "label": "Not Sure What to Put Here",
            "fillColor": "#662B60",
            "strokeColor": "#662B60",
            "pointColor": "#662B60",
            "pointStrokeColor": "#662B60",
            "pointHighlightFill": "#662B60",
            "pointHighlightStroke": "#662B60",
            "data": [
              1
            ]
        },
        {
            "label": "Not Sure What to Put Here",
            "fillColor": "#88B56E",
            "strokeColor": "#88B56E",
            "pointColor": "#88B56E",
            "pointStrokeColor": "#88B56E",
            "pointHighlightFill": "#88B56E",
            "pointHighlightStroke": "#88B56E",
            "data": [
              1
            ]
        },
        {
            "label": "Not Sure What to Put Here",
            "fillColor": "#48CA2B",
            "strokeColor": "#48CA2B",
            "pointColor": "#48CA2B",
            "pointStrokeColor": "#48CA2B",
            "pointHighlightFill": "#48CA2B",
            "pointHighlightStroke": "#48CA2B",
            "data": [
              0.83
            ]
        }
      ]
  };
  
  
      //-------------
      //- BAR CHART -
      //-------------
  var barChartData = chartData;
      var barChartCanvas = $("#barChart").get(0).getContext("2d");
      var barChart = new Chart(barChartCanvas);
  
      //barChartData.datasets[1].fillColor = "#00a65a";
      //barChartData.datasets[1].strokeColor = "#00a65a";
      //barChartData.datasets[1].pointColor = "#00a65a";
      var barChartOptions = {
          //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
          //scaleBeginAtZero: true,
          //Boolean - Whether grid lines are shown across the chart
          scaleShowGridLines: true,
          //String - Colour of the grid lines
          scaleGridLineColor: "rgba(0,0,0,.05)",
          //Number - Width of the grid lines
          scaleGridLineWidth: 1,
          //Boolean - Whether to show horizontal lines (except X axis)
          scaleShowHorizontalLines: true,
          //Boolean - Whether to show vertical lines (except Y axis)
          scaleShowVerticalLines: true,
          //Boolean - If there is a stroke on each bar
          barShowStroke: true,
          //Number - Pixel width of the bar stroke
          barStrokeWidth: 2,
          //Number - Spacing between each of the X value sets
          barValueSpacing: 5,
          //Number - Spacing between data sets within X values
          barDatasetSpacing: 1,
          multiTooltipTemplate: "&lt;%=datasetLabel%&gt;: &lt;%= value + ' %' %&gt;",
          //String - A legend template
          legendTemplate: "&lt;ul class=\"&lt;%=name.toLowerCase()%&gt;-legend\"&gt;&lt;% for (var i=0; i&lt;datasets.length; i++){%&gt;&lt;li&gt;&lt;span style=\"background-color:&lt;%=datasets[i].fillColor%&gt;\"&gt;&lt;/span&gt;&lt;%if(datasets[i].label){%&gt;&lt;%=datasets[i].label%&gt;&lt;%}%&gt;&lt;/li&gt;&lt;%}%&gt;&lt;/ul&gt;",
          //Boolean - whether to make the chart responsive
          responsive: true,
          maintainAspectRatio: true
      };
  
  
      barChartOptions.datasetFill = false;
      barChart.Bar(barChartData, barChartOptions);
  </code></pre>
  
  <p><strong>Update</strong>
  I changed from the min version of chart.js to the full version so I could see where exactly it was erroring out at. </p>
  
  <p>Here is the image from chrome console 
  <a href="https://i.stack.imgur.com/0DQTX.png"><img src="https://i.stack.imgur.com/0DQTX.png" alt="enter image description here"></a></p>