how to bind jquery static data from ajax data dynamically

Question

Im kinda new to jquery.

I have a graph in jquery and the graph get the data statically.

and I want it dynamically

this is the static data.

  var data = [
    { label: "New Request",  data: 1.7, color: "#68BC31"},
    { label: "On-Going",  data: 24.5, color: "#2091CF"},
    { label: "Deadlines",  data: 8.2, color: "red"},            
  ]

I have ajax that returns this value.

{"label":"active","data":"4", color: "#68BC31"}

this is my ajax.

jQuery.ajax({
  type: "POST", 
  url: "dashboard/graph_data/",
  success:function(response){                                                                       

     return response;

     // the response returns this value

     // {"label":"active","data":"4", color: "#68BC31"}

  }
});

how do I replace or convert the static data to my ajax function.

thanks in advance

[You can't return a value from an async callback](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) — Arun P Johny, Jul 31 '14 at 06:56

score 1 · Answer 1 · answered Jul 31 '14 at 07:12

1

var data = [
    { label: "New Request",  data: 1.7, color: "#68BC31"},
    { label: "On-Going",  data: 24.5, color: "#2091CF"},
    { label: "Deadlines",  data: 8.2, color: "red"},            
  ];

jQuery.ajax({
  type: "POST", // Are you sure you want POST and not GET ?
  url: "dashboard/graph_data/",
  dataType: "json", // If you know the return value type, explicitely type it

  success: function(response){
     data.push(response); // Maybe you'll need to JSON.parse() the response, but not sure
     console.log(data); // Your data array has been updated asynchronously
  }
});

answered Jul 31 '14 at 07:12

Oliboy50

2,661
3
27
36

Ive tried this but I have error. Uncaught TypeError: Cannot read property 'length' of undefined – Marty Jul 31 '14 at 07:23
where do you use `length` property? – Oliboy50 Jul 31 '14 at 17:37

score 0 · Answer 2 · answered Jul 31 '14 at 07:36

you have to re fill the data source for graph and then rebind it. For eg

Case 1 : Adding a new data item

jQuery.ajax({
  type: "POST", 
  url: "dashboard/graph_data/",
    success:function(response){                                                                       

data.push(response);

// Rebind function for graph
     // the response returns this value

     // {"label":"active","data":"4", color: "#68BC31"}

  }
});

Case 2 : Fresh Datasource

 jQuery.ajax({
      type: "POST", 
      url: "dashboard/graph_data/",
        success:function(response){                                                                       
    data.removeAll();
    data.push(response);

    // Rebind function for graph
         // the response returns this value

         // {"label":"active","data":"4", color: "#68BC31"}

      }
    });

Make sure you get the json in response, otherwise convert to json before pushing into data

The data is not defined, please make sure the data variable is declared globally and is with the data type array. — Abhishek Sharma, Aug 01 '14 at 06:59

how to bind jquery static data from ajax data dynamically

2 Answers2