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');
};
--
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 [email protected].
To post to this group, send email to [email protected].
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.
