Multiple instances of Google vis on a webpage

Christian_X

unread,

May 22, 2013, 11:45:38 AM5/22/13

to google-visua...@googlegroups.com

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!

asgallant

unread,

May 22, 2013, 12:13:10 PM5/22/13

to google-visua...@googlegroups.com

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.

Christian_X

unread,

May 22, 2013, 5:12:02 PM5/22/13

to google-visua...@googlegroups.com

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!

Reply all

Reply to author

Forward