CODEWITHSUNDEEP
jqueryajaxgoogle-visualizationgoogle.load
Dave Henderson
Dave Henderson

Reputation: 151

TypeError: google.load is not a function when using ajax

I am using a Google chart (termcloud) to display some data. I can get this working fine as a static feature on the page, however when I try to load the chart and its assets via ajax it just seems to keep throwing an error:

'TypeError: google.load is not a function'

Here is my ajax function:

$("li.contentpanel").click(function() {

$("#content-panel").show();

$('#content-panel').animate({
    width: '540'
}, 500, function() {
    var dataString = 'alert=1';
    $.ajax({
    type: "POST",
    url: "<?php echo site_url($topicmaplink);?>",
    data: dataString,
    cache: false,

    success: function(html){
        $("#content-panel #inner").html(html);
    }
});

});

This is the page that is called:

(JSAPI and termcloud plugin files are loaded at top of this page)

$(function() {

  google.load("visualization", "1");
  google.setOnLoadCallback(draw);
  function draw() {
    data = new google.visualization.DataTable();
    data.addColumn('string', 'Label');
    data.addColumn('number', 'Value');
    data.addColumn('string', 'Link');
    data.addRows(<?php echo sizeof($topics);?>);
    <?php 
    $trans = array("ã" => "a", "³" => "3", "º" => "0", "â" => "a", 
        "¡" => ";", "'" => "", "\n" => "",'"' => '');
    shuffle($topics);
    for($j=0;$j<sizeof($topics);$j++){
      $nonforeignkeyword = strtr($topics[$j]['keyword'],$trans);
      $totalnumber = $topics[$j]['occurrence'];
      echo 'data.setValue('.$j.', 0, "'.trim($nonforeignkeyword).'");';
      echo 'data.setValue('.$j.', 1, '.$totalnumber.');';
      echo 'data.setValue('.$j.', 2, "'.$partlink.'/searchterm||'.trim(rawurlencode($nonforeignkeyword)).'");';
    }
    ?>
    var outputDiv = document.getElementById('cp-tmap');
    var tc = new TermCloud(outputDiv);
    tc.draw(data, null);
  }
});

Even when I remove the JSAPI and termcloud js files from the page being called via ajax and place them on the same page that it is being called to the page seems to redirect to google.com and hang on a blank page.

Does anyone know where I am going wrong here?

Thanks in advance for the help

Upvotes: 3

Views: 10509

Answers (3)

mansi joshi
mansi joshi

Reputation: 41

You need to add this script tag into your index.html

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"> </script>

You can check this from google charts site.

Geo chart from google

Upvotes: 1

Jamie S
Jamie S

Reputation: 2299

I was having a similar problem where my draw function was not able to find the element it was looking for. It seemed to be failing on:

document.getElementById('map-canvas');

I found the reason to be the google.load("visualization", "1"); must be calling document.write which means that the DOM was totally empty when I tried to grab the element.

I fixed it by putting the google.load into the index.html so visualization was loaded before it got to my draw( ) function

Upvotes: 0

Dave Henderson
Dave Henderson

Reputation: 151

Solved this issue for anyone who may be having the same problem. Removed on the google.load and setOnLoadCallback and placed these in their own callback function after the datatable has been drawn:

<pre>
<code>
  //google.load("visualization", "1");
  //google.setOnLoadCallback(draw);
  function draw() {
    data = new google.visualization.DataTable();
    data.addColumn('string', 'Label');
    data.addColumn('number', 'Value');
    data.addColumn('string', 'Link');
    data.addRows(<?php echo sizeof($topics);?>);
    <?php 
    $trans = array("ã" => "a", "³" => "3", "º" => "0", "â" => "a", "¡" => ";", "'" => "", "\n" => "",'"' => '');
    shuffle($topics);
    for($j=0;$j<sizeof($topics);$j++){
      $nonforeignkeyword = strtr($topics[$j]['keyword'],$trans);
      $totalnumber = $topics[$j]['occurrence'];
      echo 'data.setValue('.$j.', 0, "'.trim($nonforeignkeyword).'");';
      echo 'data.setValue('.$j.', 1, '.$totalnumber.');';
      echo 'data.setValue('.$j.', 2, "'.$partlink.'/authorname||'.trim(rawurlencode($nonforeignkeyword)).'");';
    }
    ?>
     var outputDiv = document.getElementById('cp-tmap');
    var tc = new TermCloud(outputDiv);
    tc.draw(data, null);
  }


$(document).ready(function(){ 
    setTimeout(function(){ 
        google.load("visualization", "1",{"callback" : draw});  
  }, 100); 
}); 
</code>
</pre>

Upvotes: 2

Related Questions