title: jQuery load Google Visualization API with AJAX
body: <p>There is an issue that I cannot solve, I've been looking a lot in the internet but found nothing.</p>
  
  <p>I have this JavaScript that is used to do an Ajax request by PHP. When the request is done, it calls a function that uses the Google Visualization API to draw an annotatedtimeline to present the data. </p>
  
  <p>The script works great without AJAX, if I do everything inline it works great, but when I try to do it with AJAX it doesn't work!!!</p>
  
  <p>The error that I get is in the declaration of the "data" DataTable, in the Google Chrome Developer Tools I get a <code>Uncaught TypeError: Cannot read property 'DataTable' of undefined</code>.</p>
  
  <p>When the script gets to the error, everything on the page is cleared, it just shows a blank page.</p>
  
  <p>So I don't know how to make it work.</p>
  
  <pre><code>$(document).ready(function(){               
      // Get TIER1Tickets                 
      $("#divTendency").addClass("loading");
  
      $.ajax({
          type: "POST",
          url: "getTIER1Tickets.php",
          data: "",
          success: function(html){
              // Succesful, load visualization API and send data      
              google.load('visualization', '1', {'packages': ['annotatedtimeline']}); 
              google.setOnLoadCallback(drawData(html));                                                   
          }
      });     
  });
  
  
  function drawData(response){            
      $("#divTendency").removeClass("loading");
  
      // Data comes from PHP like: &lt;CSV ticket count for each day&gt;*&lt;CSV dates for ticket counts&gt;*&lt;total number of days counted&gt;
      // So it has to be split first by * then by ,
      var dataArray   = response.split("*");
      var dataTickets = dataArray[0];
      var dataDates   = dataArray[1];
      var dataCount   = dataArray[2];
  
      // The comma separation now splits the ticket counts and the dates
      var dataTicketArray = dataTickets.split(",");
      var dataDatesArray  = dataDates.split(",");
  
      // Visualization data                               
      var data = new google.visualization.DataTable();
      data.addColumn('date', 'Date');
      data.addColumn('number', 'Tickets');
      data.addRows(dataCount);                                                    
  
      var dateSplit = new Array();
      for(var i = 0 ; i &lt; dataCount ; i++){
          // Separating the data because must be entered as "new Date(YYYY,M,D)"
          dateSplit = dataDatesArray[i].split("-");
          data.setValue(i, 0, new Date(dateSplit[2],dateSplit[1],dateSplit[0]));
          data.setValue(i, 1, parseInt(dataTicketArray[i]));
      }               
  
       var annotatedtimeline = new google.visualization.AnnotatedTimeLine(document.getElementById('divTendency'));
       annotatedtimeline.draw(data, {displayAnnotations: true});                              
  }
  </code></pre>