google visualization-Click event

Question

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

Chavira

Answer 1

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;
     });

Thury

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 – Chavira

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) – Thury

when I try your example sir jmac, i'm getting error, data is not defined. I thought data is google visualization variable. – Oxpecker

@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. – Thury

indeed jmac..i manage to trace the problem not totaly related to event..but instead my variable naming – Oxpecker

@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. – Thury

@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. – Oxpecker

i'm trying to get the value of the highlighted bar. hopefully to sum them up so i can display the output on a <span> located on top of the chart..fyi: isStacked = true – Oxpecker

@Charles, can I suggest asking another question 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. – Thury

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? – Krystinakrystle

Answer 2

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);
                }
            });
        }
    }
]}

Ahern

I think your if condition should be if (chart.getSelection() && chart.getSelection()[0] ) {, Otherwise it will not consider the zeroth item – Vaenfila

If you mean that "&& chart.getSelection()[0].row" check is not needed, I think it won't cause harm, it simply checks if chart.getSelection()[0].row exists. Right ? – Ahern

NO, it checks for the value in row which can be zero also in that whole condition fails. – Vaenfila

You might be looking for this - row in chart.getSelection()[0] – Vaenfila

Please check this > sl.bing.net/cQkGfINP6ia – Ahern