CODEWITHSUNDEEP
phpjavascriptajaxgoogle-visualization
anel
anel

Reputation: 173

Google charts api after ajax call

I've got a problem with the visualization of data with google's charts api after an ajax call.

First I made an ajax call and fetched a json object. After that I want to extract some data out of the json and draw a gauge chart. Getting the json and extracting the data works fine, but when I try to load the chart, the body gets removed and I get a blank/white screen. Does anyone knows what I am doing wrong? I also tried to hard code values for the chart instead of taking the json values (but kept the ajax call before loading the chart), but it didn't work neither.

function loadStats(){
    var http = getRequestObject();
    var city = "berlin";
    http.open("GET", "getTwitterSentiments.php?city="+city, true);
    http.onreadystatechange=function() {
        getStatistic(http)
    };
    http.send(null);
}

function getStatistic(request) {
    if ((request.readyState == 4) && (request.status == 200)) {
        var data = request.responseText;
        var JSONStats = eval("(" + data + ")");
        loadGauge(JSONStats.sentiment_index);
    }

function loadGauge(sentiment){
    google.load('visualization', '1', {packages:['gauge']});
    google.setOnLoadCallback(drawGauge);
    function drawGauge() {
        var data = google.visualization.arrayToDataTable([
            ['Label', 'Value'],
            ['Test', sentiment]     
        ]);

        var options = {
            width: 100, 
            height: 100,
            redFrom: 0, 
            redTo: 45,
            yellowFrom: 45,
            yellowTo: 55,
            greenFrom: 55, 
            greenTo: 100,
            minorTicks: 10
        };

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

Upvotes: 2

Views: 2060

Answers (2)

mohitp
mohitp

Reputation: 1305

Try using the callback feature of google.load() function.

For instance, for your code, try the following:

function loadGauge(sentiment){
    google.load('visualization', '1.0', {'packages':['gauge'], 'callback': drawGauge});

}

function drawGauge(){
...
chart.draw(data, options);
}

For more information, check the 'Dynamic loading' section of Google Loader Developer Guide: https://developers.google.com/loader/#Dynamic

If i understand correctly, calling loadGauge() multiple times will not cause multiple trips to Google servers to load the required APIs, but just once.

Upvotes: 2

alain.janinm
alain.janinm

Reputation: 20065

I guess your element testgchart is not load in the DOM yet, your code should work.

I made an example from your code :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://www.google.com/jsapi"></script>
    <script>
    function loadGauge(val){
        google.load('visualization', '1', {packages:['gauge']});
        google.setOnLoadCallback(drawGauge);
        function drawGauge() {
            var data = google.visualization.arrayToDataTable([
              ['Label', 'Value'],
              ['Test', val],
            ]);

            var options = {
                width: 100, 
                height: 100,
                redFrom: 0, 
                redTo: 45,
                yellowFrom: 45,
                yellowTo: 55,
                greenFrom: 55, 
                greenTo: 100,
                minorTicks: 10
            };


            var chart = new google.visualization.Gauge(document.getElementById('average'));
            chart.draw(data, options);
        }
    }
    </script>
  </head>
  <body>
    <div id="average"></div>
    <script>loadGauge(99)</script>
  </body>
</html>

But it doesn't work if you delete this line <script>loadGauge(99)</script> and replace the body tag with <body onload="loadGauge(99)">. Your probably doing something similar.

If your sure the element testgchart is present then put a log in loadGauge and tell me if it really get called by getStatistic.

Upvotes: 0

Related Questions