Unable to show data in pie chart over mouseOn - flot

Question

I was going through the pie charts example on the http://www.flotcharts.org/flot/examples/series-pie/index.html where I was looking at the Interactivity pie chart but on mouse over on a slice I was not able to see the percent depiction of the slice which should have come as in the case of click event where an alert pop up comes.
So could you suggest the method to fix this problem so that I can show the percentage on MouseOver. Thanks in Advance :-)
< script >
var dataSet = [{
label: "Approved/In Planning",
data: $ {
pstats.taskCountByStatusMap.WeApproved!'0' + pstats.taskCountByStatusMap.WeInPlanning!'0'
},
color: "#777"
}, {
label: "In Progress",
data: $ {
pstats.taskCountByStatusMap.WeInProgress!'0'
},
color: "#5cb85c"
}, {
label: "On Hold",
data: $ {
pstats.taskCountByStatusMap.WeOnHold!'0'
},
color: "#f0ad4e"
}, {
label: "Cancelled",
data: $ {
pstats.taskCountByStatusMap.WeCancelled!'0'
},
color: "#d9534f"
}, {
label: "Complete",
data: $ {
pstats.taskCountByStatusMap.WeComplete!'0'
},
color: "#5bc0de"
}, {
label: "Closed",
data: $ {
pstats.taskCountByStatusMap.WeClosed!'0'
},
color: "#428bca"
}];
jQuery(flotplaceholder).unbind();
function labelFormatter(label, series) {
return "<div style='font-size:8pt; text-align:center; padding-left:-12px; color:white;'>" + label + "<br/>" + Math.round(series.percent) + "%</div>";
}
var options = {
series: {
pie: {
show: 'auto',
radius: 1,
label: {
show: false,
}
}
},
legend: {
show: false,
},
grid: {
hoverable: true,
clickable: true
},
};
$(document).ready(function() {
$.plot("#flotplaceholder", dataSet, options);
});
$('#flotplaceholder').bind("plothover", function(event, pos, obj) {
alert(obj);
var percent = parseFloat(obj.series.percent).toFixed(2);
$("#hover").html("<span style='font-weight:bold; color:" + obj.series.color + "'>" + obj.series.label + " (" + percent + "%)</span>");
});

Answer 1

Your plothover event is incomplete.
$(flotplaceholder).bind("plothover", function(event, pos, obj) {
if(obj){ // am I hover on anything?
var percent = parseFloat(obj.series.percent).toFixed(2);
$("#hover").html("<span style='font-weight:bold; color:" + obj.series.color + "'>" + obj.series.label + " (" + percent + "%)</span>"); // set the contents
$('#hover').css({'position':'absolute','display':'block','left':pos.pageX,'top':pos.pageY}); // set the css to show and position it
}
else {
$('#hover').css('display','none'); // I am not hovering on anything, hide the tooltip
}
});
Working example.