CODEWITHSUNDEEP
javascriptjqueryajax
Marty
Marty

Reputation: 5

how to bind jquery static data from ajax data dynamically

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

Upvotes: 0

Views: 2437

Answers (2)

Abhishek Sharma
Abhishek Sharma

Reputation: 281

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

Upvotes: 0

Oliboy50
Oliboy50

Reputation: 2721

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
  }
});

Upvotes: 1

Related Questions