Skip to content

Using jqplotDataMouseOver for displaying the data value box when hovering over the points in JQPlot graph

May 16, 2012

I had wanted to do this for some time, and shortly after doing the TimeStamp conversion to datetime in JQPlot, I looked at how to code the data display of exact actual data points on the JQPlot graph. I say exact data points because highlighter in JQPlot, if you have used it, display x and y value data for everything you go on from the mouse cursor, so for data points you use this code: –

previousPoint = null;

$(‘#Chart’).bind(‘jqplotDataMouseOver’, function (ev, seriesIndex, pointIndex, data) {

           var labels = $(‘#sessionsCountPerDayChart .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};



This displays a nice styled box on the data point of the x and y values of the JQPlot graph. (in the same vein as the highlighter box).

Hope that helps!

From → Uncategorized

Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: