Click event on Donut Graph Section

Wappler General Need Help
1

Not sure if this is even possible, but what I would to do is create a click even on each section of a donut graph.

For example:
Graph contains 1 set of data which returns:

  • Male
  • Female

The graph shows these in the donut as two areas, what I would like it to add a click even on the two different section
So if I click on the female section it can goto one page and search the female members
and the same on the male, but searching for the male members.

If anyone one has any ideas, would be good to hear.

@Patrick is this possible to do ??

2

Hey Peter,

Have a look at creating a listener…

https://www.w3schools.com/js/js_htmldom_eventlistener.asp

Look in the dev console to get the ids or class of the sections of your chart, and create a function that does your page redirect.

–Ken

3

Thanks for that

Had a look, I can see the ID of 'chart_gender' however in there is also Male & Female. I can't seem to find any reference to that in the canvas.

So far I have added
document.getElementById("chart_gender").addEventListener("click", displayDate);

function displayDate() {
document.getElementById("demo").innerHTML = Date();
}

but this does not do anything. It works fine if i add it to a div, but I need to add it to the two seperate data of male and female.