处理地理图表图表包装器中标记的事件

Question

Can anyone help me to create an event listener for a geochart chartwrapper with markers ? My objective is to throw an alert when the user clicks on a marker.

I have tried

  google.visualization.events.addListener(pn_1,'ready', function(){
     console.log('dashboard is ready');     
     google.visualization.events.addListener(pn_1_ch,'select',function(){    
        alert('Some random alert');
     });    
  });

But so far it doesn't work. It throws no error or whatsoever. However I do get the 'dashboard is ready' message. It's only the second eventlistener that isn't working.

Any clues ? Thanks a lot :)

BTW pn_1 refers to the dashboard and pn_1_ch refers the the chartwrapper object :)

Answer 1

Without seeing all the code, there are several things to check...

First, GeoCharts require both loaders. ( /loader.js and /jsapi )

Next, I'm using frozen version 44 due to recent problems .

As for handling events, listen for the 'ready' event on the ChartWrapper .
Once fired, you can access the GeoChart via .getChart() in order to listen for the 'select' event.

With Dashboards , the 'ready' event is fired anytime the chart is re-drawn.
Here, I remove the event from the ChartWrapper to avoid adding duplicate 'select' listeners when the NumberRangeFilter is applied...

 google.charts.load('44', { callback: drawDashboard, packages: ['controls', 'corechart', 'geochart'] }); function drawDashboard() { var msgDiv = document.getElementById('message_div'); var data = google.visualization.arrayToDataTable([ ['City', 'Population', 'Area'], ['Rome', 2761477, 1285.31], ['Milan', 1324110, 181.76], ['Naples', 959574, 117.27], ['Turin', 907563, 130.17], ['Palermo', 655875, 158.9], ['Genoa', 607906, 243.60], ['Bologna', 380181, 140.7], ['Florence', 371282, 102.41], ['Fiumicino', 67370, 213.44], ['Anzio', 52192, 43.43], ['Ciampino', 38262, 11] ]); var dashboard = new google.visualization.Dashboard( document.getElementById('dashboard_div')); var rangeSlider = new google.visualization.ControlWrapper({ controlType: 'NumberRangeFilter', containerId: 'filter_div', options: { filterColumnLabel: 'Area' } }); var geoChart = new google.visualization.ChartWrapper({ chartType: 'GeoChart', containerId: 'chart_div', options: { region: 'IT', displayMode: 'markers', colorAxis: {colors: ['green', 'blue']} } }); // listen for 'ready' event on ChartWrapper google.visualization.events.addListener(geoChart, 'ready', function () { // remove 'ready' listener to avoid adding multiple 'select' events google.visualization.events.removeAllListeners(geoChart); msgDiv.innerHTML += 'ChartWrapper Ready<br/>'; // listen for 'select' event on GeoChart google.visualization.events.addListener(geoChart.getChart(), 'select', function () { msgDiv.innerHTML += 'GeoChart Selected - ' + JSON.stringify(geoChart.getChart().getSelection()) + '<br/>'; }); }); dashboard.bind(rangeSlider, geoChart); dashboard.draw(data); }

 <script src="https://www.gstatic.com/charts/loader.js"></script> <script src="https://www.google.com/jsapi"></script> <div id="dashboard_div"> <div id="filter_div"></div> <div id="chart_div"></div> <div id="message_div"></div> </div>