is it possible to have multiple google charts in one page?

Question

I am using Google visualization api. Following is my sample code. Either of the two charts can be shown if it is the only one to be drawn. But I can not get both working. Thanks for your advice.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
        <title>Home Page</title>
        <!--Load the AJAX API-->
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">
            //Load the Visualization API and the ready-made Google table visualization
            google.load('visualization', '1', {'packages':['corechart']});
        </script>

        <script type='text/javascript'>

            function drawA() {
                // Define the chart using setters:
                var wrap = new google.visualization.ChartWrapper();
                wrap.setChartType('ColumnChart');
                wrap.setDataSourceUrl('dataurl');
                wrap.setContainerId('checkin-column');
                wrap.setOptions({'title':'Daily Check-in Numbers', 'width':500,'height':400});
                wrap.draw();
                wrap.getChart();
            }

            function drawB() {
                // Define the chart using setters:
                var wrap = new google.visualization.ChartWrapper();
                wrap.setChartType('ColumnChart');
                wrap.setDataSourceUrl('dataurl2');
                wrap.setContainerId('redemption-table');
                wrap.setOptions({'title':'Redemption History', 'width':500,'height':400});
                wrap.draw();
            }



            function drawVisualization() {
               drawA();
                drawB();

            }


            google.setOnLoadCallback(drawVisualization);
        </script>
    </head>
    <body>



        <div id="checkin-column"/>
        <p/>
        <div id="redemption-table"/>

    </body>
</html>

you are only calling `wrap.getChart();` in `drawA()` – Joe Jul 15 '11 at 15:47 — Joe, Jul 15 '11 at 15:47
@Joe: that should not matter. Just for debugging. – Bobo Jul 15 '11 at 17:20 — Bobo, Jul 15 '11 at 17:20

score 12 · Accepted Answer · edited Jul 18 '11 at 19:06

12

The problem is in your divs.

Replace this:

<div id="checkin-column"/>
<p/>
<div id="redemption-table"/>

With this:

<div id="checkin-column"></div>
<p></p>
<div id="redemption-table"></div>

edited Jul 18 '11 at 19:06

BoltClock

700,868
160
1,392
1,356

answered Jul 18 '11 at 15:03

Jos Dirksen

1,863
14
13

I just discovered this problem a few mins ago. Why this is problem? To me,
is a properly closed tag. – Bobo Jul 18 '11 at 15:42
4

Ok. It is because
element is a non-void element, so it is not meant to self-close based on this http://stackoverflow.com/questions/5455768/browsers-think-div-not-ending
– Bobo Jul 18 '11 at 17:31
Both `
` and `
`, to to be exact.
– BoltClock Jul 18 '11 at 18:58

score 0 · Answer 2 · answered Jan 16 '13 at 16:43

Just throwing down some information that relates to a problem I had (not the OP's exact Q).

When you want to draw multiple charts on one page, you must use different ids for the divs your targeting (duh!) . So if you have a page that should have multiple charts but only 1 (or N < expected) is rendering, double check that there is a unique div id for each chart and that the JavaScript targets a unique div id.

Eg, the following will render only one chart:

<div id="chart"></div>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load('visualization', '1', {packages: ['corechart']});
    google.setOnLoadCallback(drawChart);
    google.setOnLoadCallback(drawChart2);

    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['', 'Stuff', 'Stuff2'],
            ['', 1.0, 2.0]
        ]);

        var options = {
            title: 'MyChart',
            pointSize: 3,
            vAxis: {
                baseline: 0.1,
                title: 'vAxis'
            },
            hAxis: {
                title: 'hAxis'
            }
        };
        var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
        chart.draw(data, options);
    }

        function drawChart2() {
            var data = google.visualization.arrayToDataTable([
                ['', 'Stuff', 'Stuff2'],
                ['', 4.0, 5.0]
            ]);

            var options = {
                title: 'MyChart2',
                pointSize: 3,
                vAxis: {
                    baseline: 0.1,
                    title: 'vAxis'
                },
                hAxis: {
                    title: 'hAxis'
                }
            };
            var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
            chart.draw(data, options);
        }
    </script>

score 0 · Answer 3 · answered Feb 26 '12 at 10:38

0

Probably not your problem, but on a related note, I have found that if you have lots of Google Visualizations on the same page ( I believe that it was in the neighborhood of 50) , Google will throttle the usage, and stop rendering properly.

answered Feb 26 '12 at 10:38

djsadinoff

5,519
6
33
40

2

This may have applied previously with the old "Image Charts" API, but with the JavaScript API, you load the library once, and then Google has no indication of how many charts you're drawing. Event if you call `google.load()` many times, it caches the library and won't make another request for the same package. – nbering Aug 29 '15 at 03:33

is it possible to have multiple google charts in one page?

3 Answers3