Do not correctly draw GeoCharts if has many in same file

Camilo Carromeu

unread,

Dec 20, 2011, 8:43:10 AM12/20/11

to google-visua...@googlegroups.com

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>

asgallant

unread,

Dec 20, 2011, 9:44:42 AM12/20/11

to google-visua...@googlegroups.com

Can you post the code after it has been processed by you server-side scripting?

I put some fake data in just to test, and it would seem that you are correct. Loading both GeoCharts on the same page fails (in my case, the charts render, but there is no data in them). If I switch one or the other's 'displayMode' option to 'regions', they both draw correctly; see http://jsfiddle.net/8UHnG/.

I also noticed that that when using markers, they fill in slowly - is this some new functionality at work (perhaps some undocumented animation)?

Camilo Carromeu

unread,

Dec 20, 2011, 11:08:29 AM12/20/11

to google-visua...@googlegroups.com

Hi asgallant,

Changing the second 'displayMode' to 'region' solve partially the problem and is a great help. Thankyou!

This update the problem to "Do not correctly draw GeoCharts as makers display mode if has many in same file"... and I still need do this.

If anybody knows another solution... I put my client-side result in http://jsfiddle.net/8UHnG/5/

ChartALot

unread,

Dec 21, 2011, 4:19:24 AM12/21/11

to google-visua...@googlegroups.com

Thanks for reporting guys!

This is indeed a bug - We are working on the issue.

btw: there is no "dataMode" option in GeoChart, the displayMode replaces it.

--
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/-/YjMIQmy2X5gJ.

To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

ChartALot

unread,

Dec 21, 2011, 6:54:10 AM12/21/11

to google-visua...@googlegroups.com

As a temporary workaround, you can draw the second GeoChart after the first one is ready.

Here is an example: http://jsfiddle.net/Bkamd/, you can make it better by first drawing the chart with no data - and then redrawing with data when the first chart is ready...

ChartALot

unread,

Dec 22, 2011, 4:27:29 AM12/22/11

to google-visua...@googlegroups.com

This issue is expected to be solved in the next release - Please verify then.

Jinji

unread,

Aug 21, 2012, 11:03:36 AM8/21/12

to google-visua...@googlegroups.com

I think the issue in this thread was indeed fixed. Not sure about that new issue you're reporting. Can you provide a simple example page that demonstrates the problem?

On Fri, Aug 17, 2012 at 4:16 AM, Samuel Sarmento <sam.sa...@gmail.com> wrote:

I've been having the same issue with a poor rendering with about 200 rows, I noticed that using the ISO Codes instead of names helped a little.
Any news on this subject? Is there a release date or any issue tracker for this? Can we get involved and help by any means?

Em quinta-feira, 22 de dezembro de 2011 07h27min29s UTC-2, ChartALot escreveu:
This issue is expected to be solved in the next release - Please verify then.

--

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/-/4a5iGzuzYHoJ.

Reply all

Reply to author

Forward