How to add jquery click event to gRaphael graphic?

Question

I made a chart using g.Raphael:

$(function(){ var r = Raphael("pieChart"), pie = r.piechart(320, 240, 100, [55, 20, 13, 32, 5, 1, 2, 10]); r.text(320, 100, "Interactive Pie Chart").attr({ font: "20px sans-serif" }); $(pie.sector).click(function(){ alert('hi');//not work! }) }) 

I later added a click event to pie.sector, but my event does not work ... does anyone know the correct way to handle gRaphael using jQuery?

Answer 1

Here you go

Iterate over your pie slices and add a click handler to them

 for(var index_i=0;index_i < pie.covers.items.length;index_i++){ pie.covers.items[index_i].click(clickSomeSlice); } var clickSomeSlice = function () { alert("clicked on\t"+this.label[1].attrs.text); }; 

Here is a complete jsfiddle example

Answer 2

Just pick a pie

 $(pie).click(function(){ alert('hi'); })