Redraw Chart.js Chart with Json_encoded array from ajax request

Question

I have a chart that I'm drawing using the chart.js library. The first draw goes perfectly, but I'm attempting to redraw the doughnut chart with NEW data from an ajax call.

I'm using PHP and Codeigniter to grab all the data I need and return a json_encoded array to redraw the graph. It is not working with my current code, HOWEVER, if i copy the returned code from the console, and paste it in it works FINE! Anyone know why this is? I've tried JSON_FORCE_OBJECT too and it doesn't work...

Here is my controller code...

$data = array();
  foreach($g_data as $gd) {
    $temp = array(
        'value' => $gd['count'],
        'color' => $this->App_model->adjustBrightness($base_color),
        'label' => $gd['label']
    );
    array_push($data, $temp);
  }

  echo json_encode($data);

Here is my JS...

$.ajax({
     type: "POST",
     url: siteUrl + "app/load_graph",
     data: {
      question_id: question_id
     },
     success: function(data) {

        //Get context with jQuery - using jQuery's .get() method.
        var ctx = $("#analytics-graph").get(0).getContext("2d");
        //This will get the first returned node in the jQuery collection.
        var myNewChart = new Chart(ctx);

        new Chart(ctx).Doughnut(data);

    } 
  });

Here is what is output to the console from my php request:

[{"value":3,"color":"#64ff9d","label":"less than 1"},{"value":0,"color":"#63ff9c","label":"2"},{"value":0,"color":"#71ffaa","label":"3"},{"value":0,"color":"#74ffad","label":"4"},{"value":2,"color":"#57ff90","label":"5"},{"value":0,"color":"#7cffb5","label":"6+"}]

And here is what is baffling me, if I copy the above returned object and use it as a variable in my code, it works perfectly! no idea why...

$.ajax({
     type: "POST",
     url: siteUrl + "app/load_graph",
     data: {
      question_id: question_id
     },
     success: function(data) {

        //Get context with jQuery - using jQuery's .get() method.
        var ctx = $("#analytics-graph").get(0).getContext("2d");
        //This will get the first returned node in the jQuery collection.
        var myNewChart = new Chart(ctx);

        var data = [{"value":3,"color":"#64ff9d","label":"less than 1"},{"value":0,"color":"#63ff9c","label":"2"},{"value":0,"color":"#71ffaa","label":"3"},{"value":0,"color":"#74ffad","label":"4"},{"value":2,"color":"#57ff90","label":"5"},{"value":0,"color":"#7cffb5","label":"6+"}]

        new Chart(ctx).Doughnut(data);

    } 
  });

Answer 1

I'm an idiot, just needed the "json" type in the jquery ajax function, this question is probably pretty useful to someone else so here is what fixed it: dataType: "json",

$.ajax({
     type: "POST",
     dataType: "json",
     url: siteUrl + "app/load_graph",
     data: {
      question_id: question_id
     },
     success: function(data) {

        //Get context with jQuery - using jQuery's .get() method.
        var ctx = $("#analytics-graph").get(0).getContext("2d");
        //This will get the first returned node in the jQuery collection.
        var myNewChart = new Chart(ctx);

        new Chart(ctx).Doughnut(data);

    } 
  });
});