Add an event-listener to a google geochart which uses markers

Question

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');       

};

Answer 1

I think that this is where the problem comes from :

     //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);

 });  

You're adding an event listenner that waits until pn_1 is ready in order to add another event listener to pn_1_ch. I think it might interfere with the whole code. Maybe you should try adding the event seperately. Also try not to define the function outside of the addListener at first just to see if the function is working. Try this :

google.visualization.events.addListener(pn_1, 'ready', function(){ /*...*/ });
google.visualization.events.addListener(pn_1_ch,'select', function(){
   alert("this is working");
}); 

It appears that writting my code that way always works better for me.