As a general rule, each chart needs a unique div to draw in, so make sure that the charts all have unique divs (ie, you are not drawing all of them in "chart_div"). Also, you typically only want to call google.load and google.setOnLoadCallback once per page. If you could post an example of the code you are using to put two charts on one page, I can help you correct for these.
On Wednesday, May 22, 2013 11:45:38 AM UTC-4, Christian_X wrote: > > Good morning, all. > > I'd like to have multiple instances of Google charts and gauges on a > single page. > > Unfortunately, as soon as I add the 2nd one - even if they're different > chart types - the whole thing tanks; only the final chart shows up. > > I'm by no means a developer; I haven't written code in 2 decades - but I > do understand the overall concepts, if not the syntax. Is there some way > to section off the code from one chart to another, so that the 2nd (3rd, > 4th) instance of charts don't override the previous ones? Is it merely a > matter of a unique naming convention for each? If so, where do I put it? > Termination tags at the beginning and end? > > Note: I do need to keep it as an individual set of code for each chart, > rather than marrying it all into one. Each is a custom post type and > category, so they will be called upon in different configurations > throughout my domain, or added as individual widgets in the sidebars. > > I'll just use an example here: > > <html> > <head> > <script type='text/javascript' > src='https://www.google.com/jsapi'></script> > <script type='text/javascript'> > google.load('visualization', '1', {packages:['gauge']}); > google.setOnLoadCallback(drawChart); > function drawChart() { > var data = google.visualization.arrayToDataTable([ > ['Label', 'Value'], > ['Memory', 80], > ['CPU', 55], > ['Network', 68] > ]); > > var options = { > width: 400, height: 120, > redFrom: 90, redTo: 100, > yellowFrom:75, yellowTo: 90, > minorTicks: 5 > }; > > var chart = new > google.visualization.Gauge(document.getElementById('chart_div')); > chart.draw(data, options); > } > </script> > </head> > <body> > <div id='chart_div'></div> > </body> > </html> > > > > The above works fine, but if I add the same thing again (or even a > different chart), everything tanks. > > I'm sure this is pretty elementary. Feel free to chuckle at the noob. I > just don't know enough about the syntax to put each instance of the above > on lockdown, so that it cannot interfere with the others. > > Thanks for your help! > > -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/google-visualization-api?hl=en. For more options, visit https://groups.google.com/groups/opt_out.
