Question

By default when we hover the mouse on any region of the jqplot charts it changes color – that’s fine. But I want that on hover it should show its value. For example I have 2 regions on charts as:

1. label=Customer projects,value=20
2. label=POCs,value=10

Now on mouse hover it should show the label as well as the value. For example it should show as

Customer Projects:20

How can I do this? Thanks in advance.

Answer 1

Here’s a hack that uses the fact that the labels are just text divs:

previousPoint = null;
$('#chartdiv').bind('jqplotDataMouseOver', function (ev, seriesIndex, pointIndex, data) { 
    var labels = $('#chartdiv .jqplot-data-label');
    if (previousPoint != null)
    {
       labels[previousPoint['idx']].innerHTML = previousPoint['data'][1]+'';               
    }
    labels[pointIndex].innerHTML = data[0] + ": " + data[1];
    previousPoint = {'idx':pointIndex, 'data':data};
}); 

Working fiddle here. Remember to cache the jqplot files.