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.
On Saturday, March 5, 2016 at 9:02:08 PM UTC+8, Ashwin Jugurnauth wrote:
>
> 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/555a4079-7f0e-4628-815d-66698399a959%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
