5

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

Hitesh
  • 3,449
  • 8
  • 39
  • 57
vmb
  • 2,878
  • 15
  • 60
  • 90

2 Answers2

8

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:

  1. Create a ready event for the wrapper
  2. 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;
     });
jmac
  • 7,078
  • 2
  • 29
  • 57
  • in ur example also,there is one variable with name "chart".ie google.visualization.events.addListener(chart, 'select', function()...here where u declared chart variable..actually in ur case there is only one variable.."wrapper"..can u pls explain – vmb Mar 27 '13 at 04:12
  • Sorry, I made a bunch of mistakes in my example at the bottom so I updated it. The point is that the wrapper is not a chart, it's a wrapper. `wrapperObject.getchart()` will return the chart object inside the wrapper. You need to set a listener on `chart.getChart()`, not on chart itself. (you may also want to change the name of the object from 'chart' to 'wrapper' to make your variables names also include that distinction) – jmac Mar 27 '13 at 05:28
  • when I try your example sir jmac, i'm getting error, `data is not defined`. I thought `data` is google visualization variable. – Charlesliam Jan 03 '14 at 05:28
  • @Charles, mind asking a separate question with your code? If data is not defined, it could be for a variety of reasons, but likely not related to the event handler at all. – jmac Jan 06 '14 at 00:56
  • indeed jmac..i manage to trace the problem not totaly related to event..but instead my variable naming – Charlesliam Jan 07 '14 at 02:10
  • @Charles, glad you could work it out! Good luck, and if you come across an issue, feel free to post it -- asgallant will likely be the one answering it as he's 50 times more knowledgeable than me, but you're in good hands with the google-visualization community in general. – jmac Jan 07 '14 at 02:12
  • @Sir jmac..while using your code on my barchart im recieving `undefined` output on this `alert(data.getValue(chart.getSelection()[0].row, 0));` I try replacing `row` with `column` and still no luck. – Charlesliam Jan 07 '14 at 02:17
  • i'm trying to get the value of the highlighted bar. hopefully to sum them up so i can display the output on a `` located on top of the chart..fyi: `isStacked = true` – Charlesliam Jan 07 '14 at 02:21
  • @Charles, can I suggest [asking another question](http://stackoverflow.com/questions/ask) with all the relevant information included? (what code you're using, what problem you're getting, what you've tried to fix it, etc.) That's a lot easier than discussing through the comments. – jmac Jan 07 '14 at 02:26
  • this does not seem to work properly when you have a chart control wrapper on the chart. for example i have a line chart with a line chart filter (think stock chart with the draggable time range beneath the chart). when that range slider is utilized, it changes the row numbers in the original chart. any ideas? – bigerock Apr 20 '16 at 23:04
0

Thanks. Following worked for me.

 chartEvents={[
    {
        eventName: "ready",
        callback: ({ chartWrapper, google }) => {
            const chart = chartWrapper.getChart();
            const dataTable = chartWrapper.getDataTable();
            google.visualization.events.addListener(chart, "select", e => {
                if (chart.getSelection() && chart.getSelection()[0] && chart.getSelection()[0].row) {
                    const mydata = dataTable.getValue(chart.getSelection()[0].row, 0);
                    console.log(mydata);
                }
            });
        }
    }
]}
Vimal Bhatt
  • 71
  • 1
  • 3