[visualization-api] Do not correctly draw GeoCharts if has many in same file

Tue, 20 Dec 2011 06:06:20 -0800 

Hi guys!

I try draw various charts in same HTML file, but appears the code of first 
function interferes on next function. The maps do not render. If I comment 
the others calls and draw only one chart, all works. If I change to GeoMaps 
too.

I do not knows the API deeply, but appears that construct in GeoChart 
behaves like a singleton. The JS error is:

*Error: l.google.maps.Load is not a function
Source File: https://maps.gstatic.com/intl/pt_br/mapfiles/api-3/7/5/main.js
Line: 42*

Thanks for any help.

Camilo

-- My code: --

<html>
    <head>
        <script type='text/javascript' 
src='https://www.google.com/jsapi'></script>
        <script type='text/javascript'>
        google.load('visualization', '1', {'packages': ['geochart', 
'corechart']});
        google.setOnLoadCallback(drawMaps);
        
        function drawMaps() {
            drawH01();
            drawH02();
            drawH03();
        }
        
        function drawH01() {
            var data = new google.visualization.DataTable();
            
            data.addColumn('string', 'Province');
            data.addColumn('number', 'Concentração de Engenheiros');
            
            data.addRows([<?= implode (",", $_OUT01) ?>]);
            
            var options = {
                dataMode: 'regions',
                region: 'BR',
                resolution: 'provinces',
                displayMode: 'markers',
                backgroundColor: 'white',
                width: 556, 
                height: 347
            };
            
            var h01 = new 
google.visualization.GeoChart(document.getElementById('div01'));
            h01.draw(data, options);
        };
        
        function drawH02() {
            var data = new google.visualization.DataTable();
            
            data.addColumn('string', 'Área de Atuação');
            data.addColumn('number', 'Quantidade de Profissionais');
            
            data.addRows([<?= implode (",", $_OUT02) ?>]);
            
            var options = {
                width: 450, height: 300,
                title: 'Área de Atuação dos Engenheiros de Software'
            };
            
            var h02 = new 
google.visualization.PieChart(document.getElementById('div02'));
            h02.draw(data, options);
        };
        
        function drawH03() {
            var data = new google.visualization.DataTable();
            
            data.addColumn('string', 'Province');
            data.addColumn('number', 'Concentração de Doutores');
            
            data.addRows([<?= implode (",", $_OUT03) ?>]);
            
            var options = {
                dataMode: 'regions',
                region: 'BR',
                resolution: 'provinces',
                displayMode: 'markers',
                backgroundColor: 'white',
                colorAxis: {colors: ['black']},
                legend: {textStyle: {color: 'black', fontSize: 16}}
            };
            
            var h03 = new 
google.visualization.GeoChart(document.getElementById('div03'));
            h03.draw(data, options);
        };
        </script>
    </head>
    
    <body>
        <h3>Distribuição de Engenheiros de Software</h3>
        <div id='div01'></div>
        <h3>Área de Atuação</h3>
        <div id='div02'></div>
        <h3>Distribuição de Doutores</h3>
        <div id='div03'></div>
    </body>
</html>

-- 
You received this message because you are subscribed to the Google Groups 
"Google Visualization API" group.
To view this discussion on the web visit 
https://groups.google.com/d/msg/google-visualization-api/-/U54p9dZldwEJ.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to 
[email protected].
For more options, visit this group at 
http://groups.google.com/group/google-visualization-api?hl=en.

Reply via email to