CODEWITHSUNDEEP
javascriptjquerygoogle-visualization
user1563825
user1563825

Reputation:

Google Chart with ajax

I can't see what i'm missing. I can't seem to get the Google chart api running with a little bit of ajax. What am I doing wrong?

<html>
  <head>      
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
   var dataSet =  $.ajax({
        url: "phpdata.php",
            async: false            
    }).responseText;
    var data = google.visualization.arrayToDataTable([
    dataSet
    ]);

    var options = {
      title: 'Company Performance'
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }


</script>
</head>
<body>
      <div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>

my php data:

['year', 'fixedassets'],

['2009', 1],

['2010', 1.2],

['2011', 1.6]

Upvotes: 2

Views: 5196

Answers (2)

Shalvika
Shalvika

Reputation: 391

I don't know if it would solve your issue, I was facing a similar issue while rendering partials called from ajax calls. The drawChart function was not being called which basically meant that the setOnLoadCallback was not firing as expected. To overcome that, I modified my calls as follows:

 google.load("visualization", "1", {packages:["corechart"]});
    //google.setOnLoadCallback(drawChart);
      $(function() {
        drawChart(); //works
      });
    function drawChart() {
   }

So basically I left the google method , and made my own self calling function which gets called whenever the page renders or the div is updated.

Upvotes: 3

workergnome
workergnome

Reputation: 566

The problem is likely with your ajax call:

<html>
  <head>      
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
   var dataSet =  [ ['year', 'fixedassets'],['2009', 1],['2010', 1.2],['2011', 1.6]];
    var data = google.visualization.arrayToDataTable(dataSet);
    var options = {
      title: 'Company Performance'
    };
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>
</head>
<body>
      <div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
    </html>

This works, so it's not a problem with any of the existing code. Your format for the ajax call is using a bunch of depreciated jQuery calls, and without access to your server I can't test it, but you could try something like:

<html>
  <head>      
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
   $.get("phpdata.php", function(response_data) {
            var data = google.visualization.arrayToDataTable([response_data]);
        var options = {
          title: 'Company Performance'
        };
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
        });
  }


</script>
</head>
<body>
      <div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>

and see if that works.

I think that the problem you're having is that you have a string: "['year', 'fixedassets'], ['2009', 1], ['2010', 1.2], ['2011', 1.6]" and you want it evaluated as an array: [['year', 'fixedassets'],['2009', 1],['2010', 1.2],['2011', 1.6]]. The easy-but-insecure way to solve this is to use eval(). you'd say:

$.get("phpdata.php", function(response_data) {
   var data = google.visualization.arrayToDataTable(eval('[' + response_data + ']');

This is not-great-but-working as long as you completely control the server, and you're not getting any user input that could be sent from your server.

The 'right' way to do this would be to send actual json from your server, instead of sending what you're sending, and then use JSON.parse(response_data).

Upvotes: 1

Related Questions