Think I got it. I renamed the chart_div for each of the slides and nothing seems to be interfering.
http://bit.ly/18iYaNT Probably not the ideal solution, but a functional one. I'm on Pagelines Pro framework on Wordpress, so the code for each visualization is stored in an individual Feature slide(a custom post type), then the entire Feature set is called by the page, when I select the category type. I'll have to inquire on Pagelines forum about the space above each slide. I can't find why that may be occurring; the visualizations are set at the correct size for the space. Thanks! On Wednesday, May 22, 2013 10:45:38 AM UTC-5, 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.
