Ajax Call to Server and Passing Data back to Charts.js

Question

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

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.

I'll paste the script and give as much guidance as possible.

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 
                        }

                        ]

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.

I've edited my code with the answer below to this :

          $('#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});


            });                                            

            });

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.

Ajax Call to Server and Passing Data back to Charts.js

Answers (1)

Related Questions