title: Ajax Call to Server and Passing Data back to Charts.js
body: <p>Ok, I've read practically every post on here about ajax,php and everything that I could find. What I'm trying to do is </p>
  
  <p>Take an array that I've pulled from my database and place it into a chart.js script. I know I'm pulling in the data correctly after checking it in firebug. It's passing through the header just fine. My problem is once I get it back I'm wanting to either a) put it into a variable or 2) just replace the data set in the chart.js script.</p>
  
  <p>I'll paste the script and give as much guidance as possible.</p>
  
  <pre><code>var cigarData = $.ajax({
      data: {cigar: sCigar, calc: "cigar"},
  type: "POST",
  url: "http://www.blah",
  dataType:"json",
  async: false,
  success:function(data) {
  // This outputs the result of the ajax request
     console.log(data);
  
       }
  
  
  }).responseText;    
  
  
  
  
  
                    var radarChartData = {
                      labels : ["Caramel","Creamy","Earthy","Floral","Fruity","Spicy","Sweet","Woody"],
                      datasets : [
                          {
                              fillColor : "rgba(228,154,7,0.5)",
                              strokeColor : "rgba(228,154,7,1)",
                              pointColor : "rgba(228,154,7,1)",
                              pointStrokeColor : "#fff",
                              data : [cigarData]//Where I want the data to be 
                          }
  
                          ] 
  </code></pre>
  
  <p>Any help would be great. I appreciate it everyone. I'll be back on in the AM to answer any questions that have come up.</p>
  
  <p>I've edited my code with the answer below to this : </p>
  
  <pre><code>          $('#cigar').change(function (event) {
  
  
                  var sCigar = $("#cigar").val();
  
                  var cigarData = $.ajax({
                  data: {cigar: sCigar, calc: "cigar"},
                  type: "POST",
                  url: "http://www.blah.com",
                  dataType:"json",
                  async: false,
                  success:function(data) {
  
                  //update chart here
                  updateChartData(data);
  
                   }
  
  
                  }).responseText;    
  
  
  
      //wrap chart refresh code as function
  
      function  updateChartData(data){
  
             var cigarData=data;
  
                var radarChartData = {
                  labels : ["Caramel","Creamy","Earthy","Floral","Fruity","Spicy","Sweet","Woody"],
                  datasets : [
                      {
                          fillColor : "rgba(228,154,7,0.5)",
                          strokeColor : "rgba(228,154,7,1)",
                          pointColor : "rgba(228,154,7,1)",
                          pointStrokeColor : "#fff",
                          data : [cigarData]  //Where I want the data to be 
                      }
  
                      ] 
  
  
                }
  
                };
  
                  var myRadar = new Chart(document.getElementById("cigarCanvas").getContext("2d")).Radar(radarChartData,{scaleShowLabels : false, pointLabelFontSize : 10});
  
  
              });                                            
  
              });
  </code></pre>
  
  <p>It's now re drawing the map each time, but the data points are not changing. It's like it keeps pulling the same dataset into the map. I'm looking at the headers and it's passing through different information each time I change selection, but it's not putting it into the [cigarData]. Is there something that I'm just flat out missing here? Does the var myRadar need to be inside the function above it to make it pull in the data correctly? I'm just not sure of the exact layout of where each function needs to be to pass information through them correctly. Thanks for all the help thus far you guys are awesome.                 </p>