Hello. I'm trying to use the AJAX jQuery functions to load the Google
Visualization API after some data has been retrieved from a Server.
Everything works perfect if I don't use AJAX but when I use it, there
is an error when I try to create the DataTable.
I'm posting the code, everything runs perfectly up to the point where
the "try..catch" block is (where the DataTable is created), I don't
know why is there an error if everything works correctly without AJAX,
is this a bug?
Please help
Code:
<script type="text/javascript"
src="http://www.google.com/jsapi";></
script>
<script type="text/javascript" src="lib/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Get TIER1Tickets
$.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){
// 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
try {
var data = new
google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Tickets');
data.addRows(dataCount);
} catch (err){
alert(err.description);
}
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("-");
//alert(dateSplit[2] + " " +
dateSplit[1] + " " + dateSplit[0]));
data.setValue(i, 0, new
Date(dateSplit[2],dateSplit[1],dateSplit[0]));
data.setValue(i, 1, dataTicketArray[i]);
}
var annotatedtimeline = new
google.visualization.AnnotatedTimeLine(document.getElementById('divTendency'));
annotatedtimeline.draw(data,
{displayAnnotations: true});
}
/*
google.load('visualization', '1', {'packages':
['annotatedtimeline']});
google.setOnLoadCallback(drawData);
function drawData(){
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Tickets');
data.addRows(<?php echo $TIER1TotalCount; ?>);
<?php
$TIER1TicketsArray =
explode(",",$TIER1Tickets);
$TIER1DatesArray = explode(",",
str_replace("'","",
$TIER1Dates));
for ($i=0 ; $i < $TIER1TotalCount ;
$i++){
$year = date("Y",
strtotime($TIER1DatesArray[$i]));
// The AnnotatedTimeLine takes
months from 0-11:
$month = intval(date("n",
strtotime($TIER1DatesArray[$i]))) -
1;
$day = date("j",
strtotime($TIER1DatesArray[$i]));
$join = "$year,$month,$day";
echo "data.setValue($i, 0, new
Date($join));";
echo "data.setValue($i, 1, ".
$TIER1TicketsArray[$i] .");";
}
?>
var annotatedtimeline = new
google.visualization.AnnotatedTimeLine(document.getElementById('divTendency'));
annotatedtimeline.draw(data,
{displayAnnotations: true});
}
*/
</script>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
