CODEWITHSUNDEEP
javascriptjquerychartsjqplot
ryan
ryan

Reputation: 333

Add mouse hover on jqPlot charts

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.

Upvotes: 1

Views: 5748

Answers (1)

Mark
Mark

Reputation: 108512

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.

Upvotes: 1

Related Questions