CODEWITHSUNDEEP
jqueryajaxgoogle-visualization
katie hudson
katie hudson

Reputation: 2893

Google Chart resize with parameters

I am having a little issue. I make a call to my database and return some data. I then pass this response to my Google chart function

$(function () {
    $.ajax({
        type: "POST",
        url: "php/process.php",
        dataType: "json"
    }).done(function(response) {

        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(function() { drawChart(response); });

    }).fail(function(jqXHR, textStatus) {
        return false;
    });
});

This all works fine. The problem is making it responsive. According to what I have seen online, to do this, I can just add a resize function

$(window).resize(function(){
    drawChart();
});

However, this will not have the data from my response. What is the best way to get the data from my Ajax request to the resize function?

Thanks

Upvotes: 1

Views: 53

Answers (1)

WhiteHat
WhiteHat

Reputation: 61275

first, google's load statement will wait for the page to load by default.
which can be used in place of --> $(function () {});, $(document).ready, etc...
it only needs to be called once per page load, so call it first.

then you can use the following setup... 

google.charts.load('current', {
  packages:['corechart']
}).then(function () {

  $.ajax({
    type: "POST",
    url: "php/process.php",
    dataType: "json"
  }).done(function(response) {

    drawChart(response);
    $(window).resize(function(){
      drawChart(response);
    });

  }).fail(function(jqXHR, textStatus) {
      return false;
  });

});

note: you can use the promise the load statement returns,
in place of --> setOnLoadCallback

Upvotes: 1

Related Questions