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

23,471

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>

23,471

Author by

Bobo

Updated on January 17, 2020

Comments

Bobo over 4 years

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>

Bobo almost 13 years

I just discovered this problem a few mins ago. Why this is problem? To me, <div id="checkin-column"/> is a properly closed tag.
Bobo almost 13 years

Ok. It is because <div> element is a non-void element, so it is not meant to self-close based on this stackoverflow.com/questions/5455768/…
BoltClock almost 13 years

Both <div> and <p>, to to be exact.
nbering over 8 years

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.