jQuery load Google Visualization API with AJAX
- by Curro
Hello. There is an issue that I cannot solve, I've been looking a lot in the internet but found nothing.
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.
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!!!
The error that I get is in the declaration of the "data" DataTable, in the Google Chrome Developer Tools I get a Uncaught TypeError: Cannot read property 'DataTable' of undefined.
When the script gets to the error, everything on the page is cleared, it just shows a blank page.
So I don't know how to make it work.
Please help
Thanks in advance
$(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: <CSV ticket count for each day>*<CSV dates for ticket counts>*<total number of days counted>
// 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 < 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});
}
