google visualization-Click event

google-visualization, javascript, jquery

Solution

Chart Wrappers are not chart objects and do not have a `click` event. In fact, Pie Charts also do not have a click event, only `select`.

If you read the documentation it says to:

- Create a `ready` event for the wrapper

- Have the `ready` event trigger a `select` event for the chart in the wrapper

Here is the example they give:

var wrapper;
function drawVisualization() {

  // Draw a column chart
  wrapper = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    dataTable: [['Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'],
                [700, 300, 400, 500, 600, 800]],
    options: {'title': 'Countries'},
    containerId: 'visualization'
  });

  // Never called.
  google.visualization.events.addListener(wrapper, 'onmouseover', uselessHandler);

  // Must wait for the ready event in order to
  // request the chart and subscribe to 'onmouseover'.
  google.visualization.events.addListener(wrapper, 'ready', onReady);

  wrapper.draw();

  // Never called
  function uselessHandler() {
    alert("I am never called!");
  }

  function onReady() {
    google.visualization.events.addListener(wrapper.getChart(), 'onmouseover', usefulHandler);
  }

  // Called
  function usefulHandler() {
    alert("Mouseover event!");
  }
}

So in your case you will need to change this section:

   google.visualization.events.addListener(chart, 'ready', function() {
       // grab a few details before redirecting

      alert(data.getValue(chart.getSelection()[0].row, 0));
       //location.href = 'http://www.google.com?row=' + row + '&col=' + col + '&year=' + year;
     });

To something like this:

   google.visualization.events.addListener(chart, 'ready', function() {
       // grab a few details before redirecting
      google.visualization.events.addListener(chart.getChart(), 'select', function() {
          chartObject = chart.getChart();
          alert(data.getValue(chartObject.getSelection()[0].row, 0));
      });

       //location.href = 'http://www.google.com?row=' + row + '&col=' + col + '&year=' + year;
     });

Problem

I am using google visulaization for drawing pie chart.Issue i am facing is, i cant able to capture click event on pie chart.i am doing like this. ``` function drawchartfromRe() { dashboard = new google.visualization.Dashboard( document.getElementById('dashboard_div')); //alert("RefuelLength"+totrefuelList.length); //alert("Vehicleid:"+totrefuelList[0].vehicleId); //google.load("visualization", "1", {packages:["corechart"]}); data = new google.visualization.DataTable(); data.addColumn('string', 'Task'); data.addColumn('number', 'Quantity'); data.addRows(totrefuelList.length); for (var i=0;i<totrefuelList.length;i++) { data.setValue(i, 0, totrefuelList[i].vehicleName); data.setValue(i, 1, totrefuelList[i].totalRefuelQty); } // var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart = new google.visualization.ChartWrapper({ 'chartType': 'PieChart', 'containerId': 'chart_div', 'options': { title: 'Refuel Trend', height:'500', width:'400', backgroundColor: { fill:'transparent' }, 'legend': 'right' } }); /* google.visualization.events.addListener(chart, 'select', function(e) { // var selection = chart.getSelection(); var vehid= data.getValue(visualization.getSelection()[0].row, 0); getRefueldailywise(vehid); });*/ // chart.draw(data, options); drawDashboard(dashboard,data,chart); google.visualization.events.addListener(chart, 'select', function() { // grab a few details before redirecting alert(data.getValue(chart.getSelection()[0].row, 0)); //location.href = 'http://www.google.com?row=' + row + '&col=' + col + '&year=' + year; }); } ``` In firebug i am getting error like this.. dashboard.getChart is not a function

Original source