Geochart API - add listener in Loop function

[Carlos Moreira]

Hi everyone! 

This is probably a javascript question, maybe not related to the API, but I can't seem to solve this. 

I don't even know how to explain the problem, so I created a very simple version of my code just to exemplify the issue. 

See it working here:

http://jsfiddle.net/cmoreira/xR8uN/

I am passing the data via a paramaters object and then looping it to create the maps. 

Everything works fine except the events.addListener. 

It seems to only pick up the settings of the last map created and affecting the other maps.

Might have to be related with global variables and things like that but I can't seem to figure out why.

Anyone could give me some tips on how to build properly the addListener in this example or tell me what I'm doing wrong? 

Thank in advanced! 

Greetings, 

Carlos

[asgallant]

You are overwriting the "geochart" variable each time you loop through the loop, so when the loop finishes, there is only 1 "geochart" for the listeners to reference inside their associated functions.  Try this instead:

function drawVisualization() {

    var geocharts = {};

    var dataTables = {};

    for (var key in iwmparam) {

        var id = parseInt(iwmparam[key]['id']);

        

        message[id] = iwmparam[key]['txt'];

        

        dataTables[key] = google.visualization.arrayToDataTable([

            ['Country', 'Popularity'],

            ['Germany', 200],

            ['United States', 300],

            ['Brazil', 400],

            ['Canada', 500],

            ['France', 600],

            ['RU', 700]

        ]);

        

        geocharts[key] = new google.visualization.GeoChart(document.getElementById('map_'+id));

        

        // use a closure to lock the value of "key" in this iteration of the loop to "x" inside the closure

        google.visualization.events.addListener(geocharts[key], 'select', (function(x) {

            return function () {

                var selection = geocharts[x].getSelection();

                

                if (selection.length == 1) {

                    var selectedRow = selection[0].row;

                    var selectedRegion = dataTables[x].getValue(selectedRow, 0);

                    

                    alert(message[id] + " " + selectedRegion);

                }

            }

        })(key));

        

        geocharts[key].draw(dataTables[key], {

            region:'world',

            width: '500', 

            legend: 'none'

        });

    }

}

See updated jsfiddle: http://jsfiddle.net/asgallant/xR8uN/2/

[Carlos Moreira]

This is great help asgallant! 

I did another quick edit just for things to work as expected.

I changed 

alert(message[id] + " " + selectedRegion);

to

 alert(iwmparam[x]['txt'] + " " + selectedRegion);

The messages where still not reflecting the correct array. With this change it works. 

Updated jsfiddle: http://jsfiddle.net/cmoreira/U68MK/

Thanks a lot! 

2013/9/30 asgallant <drew_g...@abtassoc.com>

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/qzj9sVdGow0/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.