Unable to add 'select' eventlistener to geochart markers inside a chartwrapper

[Ashwin Jugurnauth]

I am struggling a bit at the moment with google geochart. I am trying to add an event-listener to a geochart which uses markers to display world countries, and when the user clicks on a marker, it loads country-specific data. My code works well except for the event-listeners. Now, I know that when I am using the chartwrapper object I have to add two event listeners, one for the dashboard, and one for the chart once the dashboard event listener has loaded. I have managed to get my code to work when I use regions instead of markers, but for markers I can't get it to work. It should be the same event normally, basically 'select' but I can't get it to work. I have posted my whole code for you to get the global picture but you should probably focus only on the event listeners and the associated tableSelectHandler() function. I have tried so far to remove all the code in the function and to display only a generic alert but even that won't work. Help please ! Many thanks

var script_url = [
  '/SymphonyAdminPanel/php/SQLSRV/finalshareByCountry.php',  
  '/SymphonyAdminPanel/php/SQLSRV/countryData.php',
  '/SymphonyAdminPanel/php/salesdata.php'    
];

var pn_1_data = null; //pn_1 datatable 
var pn_1 = null; // pn_1 div 
var pn_1_filter = null; // pn_1 filter 
var pn_1_ch = null; // pn_1 chart

function pn_1_draw() {  
  // Create a dashboard. 
  pn_1 = new google.visualization.Dashboard(document.getElementById('pn_1'));

  // Create a filter for our datatable 
  pn_1_filter = new google.visualization.ControlWrapper({
    'controlType': 'NumberRangeFilter',
    'containerId': 'pn_1_filter',
    'options': {
    'filterColumnIndex': 1, //Use filterColumIndex here & not filtercolumnIndex    
    }
  });

  // Chart wrapper object
  pn_1_ch = new google.visualization.ChartWrapper({
      'chartType' : 'GeoMap',
      'containerId' : 'pn_1_ch',
      'options': {
        'dataMode' : 'markers',
        'region' : 'world',
        'fontName': 'Arimo',
        'width': 900,
        'height' : 500     
      }

  });

  //We bind the elements to our dashboard 
  pn_1.bind(pn_1_filter, pn_1_ch);

  // Load Json data from server, create datatable & draw charts 
  $.getJSON(script_url[0], function(jresults){

     //We use the datatable declared earlier and assign it our $.getJson object       
     pn_1_data  = new google.visualization.DataTable(jresults.data);

     //We draw the whole dashboard object and its bound elements     
     pn_1.draw(pn_1_data);

     //We add an event listener to our dashboard which adds an event listener to the bound chart 
     google.visualization.events.addListener(pn_1, 'ready', function(){

      google.visualization.events.addListener(pn_1_ch,'select', tableSelectHandler);

     });   


  });

};

function tableSelectHandler(){
/*var selectedItem = pn_1_ch.getChart().getSelection()[0]; 
  var country = pn_1_data.getValue(selectedItem.row, 2);  

  //Set the geochart region to the country selected 
  pn_1_ch.setOption('region',country); 

  //Load new JSON data
  var url_updated = '/SymphonyAdminPanel/php/SQLSRV/countryData.php?&country='+country; 

  $.getJSON(url_updated, function(jresults){     

     pn_1_data  = new google.visualization.DataTable(jresults.data);

     pn_1.draw(pn_1_data);     

  }); */
  alert('Its working');       

};

[Daniel LaLiberte]

Hi Ashwin,

I suspect you need to use addOneTimeListener rather than addListener.  The reason is that a normal listener will be invoked every time the event occurs, whereas a one-time listener will, as the name suggests, only be used one time and then removed.  Your 'ready' event handler will therefore add another 'select' event handler to the chart every time the dashboard becomes ready, and when a select event occurs, all the handlers that you attached will be executed.   Hope that helps figure out your problem.

By the way, the GeoMap is deprecated.  You should try to use the GeoChart instead.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/39ee1f62-976e-42bc-8a09-31736d1ae907%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlaliberte@Google.com   5CC, Cambridge MA

[Kok How Teh]

I see 2 potential issues with your code:

(1) It never calls pn_1_ch.draw(); before addListener()

(2) First parameter to addListener has to be the chart object instead of the chartWrapper object. So, addListener(pn_1.getChart(),...) should be the right.