Hi, It is hard to tell the exact problem, but I believe that it has to do with the fact that the google.load function that loads the visualization api was never called, or that it was called but didn't complete yet. Since you are using ajax the 'onload' mechanism doesn't work, because the normal use of google.load is that the next command is a call to
google.setOnLoadCallback(initialize); (or similar method), but this never happens, because the page is already loaded. See more details in the Google javascript loader documentation. There are specific ways to use it from Ajax. Regards, VizGuy On Wed, Feb 24, 2010 at 3:59 PM, Curro <[email protected]> wrote: > 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 > > > 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: <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, dataTicketArray[i]); > } > > var annotatedtimeline = new > > google.visualization.AnnotatedTimeLine(document.getElementById('divTendency')); > annotatedtimeline.draw(data, {displayAnnotations: > true}); > } > > -- > 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]<google-visualization-api%[email protected]> > . > For more options, visit this group at > http://groups.google.com/group/google-visualization-api?hl=en. > > -- 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.
