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.
}
On Thursday, 29 June 2017 13:11:46 UTC+1, Stanley Tso wrote:
>
> 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);
> }
> }
>
> On Thursday, February 23, 2017 at 9:22:00 AM UTC-8, Blitz Prakash wrote:
>>
>> Is there is a solution for this request to differentiate the pie slice
>> click and legend click?
>>
>> Thanks,
>> Prakash
>>
>> On Wednesday, April 2, 2014 at 4:21:01 PM UTC+1, asgallant wrote:
>>>
>>> There is no way to tell the difference between clicking the legend and
>>> clicking a pie slice.
>>>
>>> On Wednesday, April 2, 2014 10:40:23 AM UTC-4, [email protected]
>>> wrote:
>>>>
>>>> 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, [email protected]
>>>> va escriure:
>>>>>
>>>>> 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.
>>>>>
>>>>>
>>>>>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/a51b07e4-3f03-4a5f-b08d-243ecfc9fc43%40googlegroups.com.
