I tried the following and it works: <!-- copyright (c) 2009 Google inc.
You are free to copy and use this sample. License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml";> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" / > <title>Google Visualization API Sample</title> <script type="text/javascript" src="http://www.google.com/jsapi";></ script> <script type="text/javascript"> google.load('visualization', '1', {packages: ['annotatedtimeline']}); function drawVisualization() { var data = new google.visualization.DataTable(); data.addColumn('date', 'Date'); data.addColumn('number', 'Sold Pencils'); data.addColumn('string', 'title1'); data.addColumn('string', 'text1'); data.addColumn('number', 'Sold Pens'); data.addColumn('string', 'title2'); data.addColumn('string', 'text2'); data.addRows(6); data.setValue(0, 0, new Date(2008, 1 ,1)); data.setValue(0, 1, 30000); data.setValue(0, 4, 40645); data.setValue(1, 0, new Date(2008, 1 ,2)); data.setValue(1, 1, 14045); data.setValue(1, 4, 20374); data.setValue(2, 0, new Date(2008, 1 ,3)); data.setValue(2, 1, 55022); data.setValue(2, 4, 50766); data.setValue(3, 0, new Date(2008, 1 ,4)); data.setValue(3, 1, 75284); data.setValue(3, 4, 14334); data.setValue(3, 5, 'Out of Stock'); data.setValue(3, 6, 'Ran out of stock on pens at 4pm'); data.setValue(4, 0, new Date(2008, 1 ,5)); data.setValue(4, 1, 41476); data.setValue(4, 2, 'Bought Pens'); data.setValue(4, 3, 'Bought 200k pens'); data.setValue(4, 4, 66467); data.setValue(5, 0, new Date(2008, 1 ,6)); data.setValue(5, 1, 33322); data.setValue(5, 4, 39463); var annotatedtimeline = new google.visualization.AnnotatedTimeLine( document.getElementById('visualization')); annotatedtimeline.draw(data, {'displayAnnotations': true}); var annotatedtimeline2 = new google.visualization.AnnotatedTimeLine( document.getElementById('visualization2')); annotatedtimeline2.draw(data, {'displayAnnotations': true}); } google.setOnLoadCallback(drawVisualization); </script> </head> <body style="font-family: Arial;border: 0 none;"> <div id="visualization" style="width: 800px; height: 400px;"></div> <div id="visualization2" style="width: 800px; height: 400px;"></div> </body> </html> On Feb 11, 8:37 pm, ion <[email protected]> wrote: > Hi Margie, > I tested on my code and you can display 2 different graphs. The > difference was that I didn't use functions for every task that I > needed. Maybe it's something with js variables; you end up using the > same variable for chart. You can try to give different name to the 2 > char variables. Also you can find out what div it's not used by > putting: > > <div id='graph_div_bar' style='width: 900px; height: 300px;'> bar > div </div> > > My guess it's that you all the time use the first div (when bar is > shown it is shown in "bar div", when foo it's shown it is shown also > in "bar div"). > > Sorry I can't help more. > > Ion -- 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.
