Pie chart legend click event

[estadistica...@gmail.com]

Hi, 

I'm making and app with Google Charts API.

 I don't know how to detect when a user clicks an element from the legend. In other charts (like bar charts) I use getSelection() and, if the value is null it means I clicked a legend item. But in pie chart it never happens, I obtain the same value of the slice.

Thanks in advance.

[estadistica...@gmail.com]

Here is the code I made:

 google.visualization.events.addListener(chart, 'select', function () {

        var sel = chart.getSelection();

        // if selection length is 0, we deselected an element

       if (sel.length > 0) {

           // if row is undefined, we clicked on the legend

        alert("selected item is"+sel[0].row);

           if (sel[0].row == null) {

var col = sel[0].column;

if (columns[col] == col) {

// grey out the legend entry

// hide the data series

columns[col] = {

        label: data.getColumnLabel(col),

         type: data.getColumnType(col),

          calc: function () {

                  return null;

            }

 };

series[col - 1].color = '#CCCCCC';

 

}else{    

// show the data series

     columns[col] = col;

     series[col - 1].color = null;

 

//var view = new google.visualization.DataView(data);

            //chart.draw(view, options);

}

var view = new google.visualization.DataView(data);

view.setColumns(columns);

chart.draw(view, options);

}

}

       

   });

The probles is sel[0].row is never null

El dimecres 2 d’abril de 2014 16:37:42 UTC+2, estadistica...@gmail.com va escriure:

[asgallant]

There is no way to tell the difference between clicking the legend and clicking a pie slice.

[Blitz Prakash]

Is there is a solution for this request to differentiate the pie slice click and legend click?

Thanks,

Prakash

[Stanley Tso]

Finally figured out. Pie click, just use normal select. Otherwise you will have to pull the DOM object HTMLElement and work with it like xml. All legend will use "<text>" tag under svg. Below is the piece of code that made it work with some styling and clicking event changes:

            var chartXml = document.getElementById("MyChartElementDivID");

            var nodes = chartXml.getElementsByTagName("text");

            for (var i = 0; i < nodes.length; i++)

            {

                // detect if the label IS what we need.

                if (nodes[i].innerHTML == "TheLegendText that I'm looking for")

                {

                    nodes[i].setAttribute("fill", "#0000ff");

                    nodes[i].setAttribute("style", "cursor:pointer;text-decoration:underline;");

                    nodes[i].setAttribute("onclick", "alert('I clicked'+this.innerHTML);

[aiden fry]

Hello All,

Its a few years later, but i just came across this situation,

I found what was for me a nicer solution.

It was to listen to click events rather than selected events, then parse the targetID for 'legendentry', then parse the index value.

if click on pie is says something else, so i was able to recognise just legend click.

This allowed me to recognise the different clicks and then do something interesting with them.

   

 google.visualization.events.addListener(chart, 'click', afunction());


function afunction(e){


         if (!e.targetID.includes("legendentry")) {
            return;
        }
        var targetId = e.targetID;


        var selIn = parseInt(targetId.substr(targetId.lastIndexOf("#") + 1, targetId.length-1));


       //Do something cool.
}