I suspect the problem is in the style attribute of your container div: <div id="chart_div" style="width: 800; height: 600"></div>
You are missing the 'px' after the height and width parameters. Try it with this: <div id="chart_div" style="width: 800px; height: 600px"></div> On Monday, May 14, 2012 8:38:21 AM UTC-4, Marc wrote: > > 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 view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/6bp_ESdRMGsJ. 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.
