your #graph_div_bar div can only hold one of them, because it has the same dimension like #graph_div_foo
So you have to remove the style from #graph_div_bar and add it to <div><h2>Foo Project Open Tasks</h2></div> which has no style at all (documentation says you must specify width and height). On Feb 12, 12:49 am, Margie Roginski <[email protected]> wrote: > I am trying to put two annotated timeline graphs on the same page. I > see other people asking if there is a limit on the number and the > number they are trying is much higher than 2, so I know I must be > doing something stupid, but I can't figure out what. > > Here is the script code I am using, followed by the html that contains > the two divs with the ids that identify where the graphs should get > placed. If I comment out the call to drawChartBar(), I get the chart > for Foo, and if I comment out the call to drawChartFoo(), I get the > chart for Bar. So I know the code works. But if I have both > drawChartFoo() and drawChartBar() inside drawCharts, I only get the > first chart (the one for Foo). > > Have studied thsi code but just can't see what's wrong. Would very > much appreciate any pointers to what I am doing wrong, thanks!! > > <script type="text/javascript"> > google.load('visualization', '1', {'packages': > ['annotatedtimeline']}); > google.setOnLoadCallback(drawCharts); > > function drawCharts() { > drawChartFoo(); // if I comment out just this line, I > get the chart for Bar > drawChartBar(); // if I comment out just this line, I > get the chart for Foo > } > > function drawChartBar() { > var query = new google.visualization.Query('/taskmanager/ > vis_datasource/'); > query.setQuery('bar'); > query.send(handleQueryResponseBar); > } > function handleQueryResponseBar(response) { > var data = response.getDataTable(); > var chart = new > google.visualization.AnnotatedTimeLine(document.getElementById('graph_div_bar')); > chart.draw(data, {title: 'Bar Project Open Tasks'}); > } > > function drawChartFoo() { > var query = new google.visualization.Query('/taskmanager/ > vis_datasource/'); > query.setQuery('foo'); > query.send(handleQueryResponseFoo); > } > function handleQueryResponseFoo(response) { > var data = response.getDataTable(); > var chart = new > google.visualization.AnnotatedTimeLine(document.getElementById('graph_div_foo')); > chart.draw(data, {title: 'Foo Project Open Tasks'}); > } > > </script> > > <div id="content-main"> > <div id='graph_div_bar' style='width: 900px; height: 300px;'></ > div> > <div><h2>Bar Project Open Tasks</h2></div> > <div id='graph_div_foo' style='width: 900px; height: 300px;'></ > div> > <div><h2>Foo Project Open Tasks</h2></div> > </div> > > Thanks, > Margie -- 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.
