Question

I came across this Jquery based pie chart online. You can download it freely from here: http://www.elated.com/articles/snazzy-animated-pie-chart-html5-jquery/

I am unable to convert the mouse click function of sliding pie pieces to react on mousehover in the same way. There seem to be an issue with the way they react to mouse hover. However, when the same mousehover is applied to the table, there is no problem and the pie chart reacts as expected. Can you please look into the code and tell me what needs to be changed in order to get the pie chart to expand on mouse hover.

Thank you very much.

Answer 1

The reason the hover event doesn’t work on the chart, is because the chart is a canvas element. The slices aren’t separate elements. So you need to use a mousestop event, that gets called every time the user hover over a slice and holds the mouse still.

The mousestop event doesn’t come with Jquery, but Richard Scarrott made a Jquery plugin: http://www.richardscarrott.co.uk/posts/view/jquery-mousestop-event

You can use it on the chart like this:

$('#chart').mousestop(100, handleChartClick);