I'm trying to use the annotated timeline to display some results from a performance test. I have done this one other time with good results. That time, I used a php script on the server to generate all the addColumn, addRow, and setCell methods for the DataTable. Since there was a lot of data, that generated a multiple thousand line javascript function. Looking at the documentation for DataTable, it seemed like I would be better off to have a php script that got called, and returned a JSON string to use to load the argument for the DataTable constructor. However, when I did that, I got the error listed in the subject. That error occurred when I tried to execute the draw method of the AnnotatedTimeLine class.
I wrote a php script that would return a small subset of the data, so I would have something I could work with a bit easier. It does generate the same error. So, here's the original html file: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Detail Performance Charts</title> <script type="text/javascript" src="jquery.js"></script> <script type='text/javascript' src='http://www.google.com/jsapi'></ script> <script type="text/javascript" > google.load('visualization', '1', {'packages':['annotatedtimeline']}); </script> <script type='text/javascript' src='PerfMultiTestChart.js'></script> </head> <body> <div id="chart_div" style="width: 800; height: 600"></div> </body> </html> Here's the PerfMultiTestChart.js file it loads: $(document).ready(function() { $.extend({ getUrlVars: function(){ var vars = [], hash; var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); for(var i = 0; i < hashes.length; i++) { hash = hashes[i].split('='); vars.push(hash[0]); vars[hash[0]] = hash[1]; } return vars; }, getUrlVar: function(name){ return $.getUrlVars()[name]; } }); google.setOnLoadCallback(getChartData); }); function getChartData() { var reqURL = "helpers/getMultiTestData.php?stats=" + $.getUrlVar('stats'); $.getJSON(reqURL, chartData); } function chartData(data) { var options = { 'displayAnnotations':false,'displayLegendValues':false,'legendPosition':'newRow','scaleType':'maximized' }; var chartData = new google.visualization.DataTable(data); var chart = new google.visualization.AnnotatedTimeLine(document.getElementById("chart_div")); chart.draw( chartData,options); } Finally, I copied the JSON string returned from getMultiTestData.php, and ran it through jsonlint.com. That indicated the JSON was valid, and reformatted it so that it was more readable. Here it is: { "cols": [ { "type": "datetime" }, { "type": "number", "label": "1268" }, { "type": "number", "label": "1213" } ], "rows": [ { "c": [ "14 May 2012 12:19:04", 12.6900498, {} ] }, { "c": [ "14 May 2012 12:19:12", {}, 19.2097511 ] }, { "c": [ "14 May 2012 12:19:15", 0.802081, {} ] }, { "c": [ "14 May 2012 12:19:23", {}, 0.7648078 ] }, { "c": [ "14 May 2012 12:19:26", 0.7456392, {} ] }, { "c": [ "14 May 2012 12:19:34", {}, 0.6042936 ] }, { "c": [ "14 May 2012 12:19:37", 0.6983837, {} ] }, { "c": [ "14 May 2012 12:19:39", {}, 0.8682235 ] }, { "c": [ "14 May 2012 12:19:39", 0.8991349, {} ] }, { "c": [ "14 May 2012 12:19:44", {}, 0.727205 ] }, { "c": [ "14 May 2012 12:19:47", 0.6937866, {} ] } ] } I'm fairly sure I'm making some stupid mistake, just don't see what it is. Marc Robertson -- 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.
