Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jqplot tooltip on bar chart

Tags:

I'm using the jquery plugin jqplot for plotting some bar charts. on hover, I'd like to display the tick for the bar and its value on a tooltip. I've tried

highlighter: { show: true,              showTooltip: true,      // show a tooltip with data point values.             tooltipLocation: 'nw',  // location of tooltip: n, ne, e, se, s, sw, w, nw.             tooltipAxes: 'both',    // which axis values to display in the tooltip, x, y or both.             lineWidthAdjust: 2.5   // pixels to add to the size line stroking the data point marker             } 

but it doesn't work. the bar visually gets lighter, and there's a small dot on the top (which would ideally go away--probably from line chart renderer stuff), but there is no tooltip anywhere. Anyone know how I can do this? I'll have lots of bars so the x-axis will be cluttered and kind of a mess if I show them down there only.

like image 855
butterywombat Avatar asked Feb 03 '11 17:02

butterywombat


Video Answer


2 Answers

I go through jqplot.highlighter.js and find an undocumented property: tooltipContentEditor. I use it to customize the tooltip to display x-axis label.

Use something like this:

highlighter:{         show:true,         tooltipContentEditor:tooltipContentEditor     },  function tooltipContentEditor(str, seriesIndex, pointIndex, plot) {     // display series_label, x-axis_tick, y-axis value     return plot.series[seriesIndex]["label"] + ", " + plot.data[seriesIndex][pointIndex]; } 
like image 199
duckegg Avatar answered Sep 20 '22 05:09

duckegg


nevermind, I did a roundabout way to create my own tooltip via jquery.

I left my highlighter settings as they were in my question (though you probably don't need the tooltip stuff).

In my js file after the bar chart is set up (after $.jqplot('chart', ...) I set up an on mouse hover binding, as some of the examples showed. I modified it like this:

 $('#mychartdiv').bind('jqplotDataHighlight',          function (ev, seriesIndex, pointIndex, data ) {             var mouseX = ev.pageX; //these are going to be how jquery knows where to put the div that will be our tooltip             var mouseY = ev.pageY;             $('#chartpseudotooltip').html(ticks_array[pointIndex] + ', ' + data[1]);             var cssObj = {                   'position' : 'absolute',                   'font-weight' : 'bold',                   'left' : mouseX + 'px', //usually needs more offset here                   'top' : mouseY + 'px'                 };             $('#chartpseudotooltip').css(cssObj);             }     );          $('#chartv').bind('jqplotDataUnhighlight',          function (ev) {             $('#chartpseudotooltip').html('');         }     ); 

explanation: ticks_array is previously defined, containing the x axis tick strings. jqplot's data has the current data under your mouse as an [x-category-#, y-value] type array. pointIndex has the current highlighted bar #. Basically we will use this to get the tick string.

Then I styled the tooltip so that it appears close to where the mouse cursor is. You will probably need to subtract from mouseX and mouseY a bit if this div is in other positioned containers.

you can then style #chartpseudotooltip in your css. If you want the default styles you can just add it to .jqplot-highlighter-tooltip in the the jqplot.css.

hope this is helpful to others!

like image 23
butterywombat Avatar answered Sep 20 '22 05:09

butterywombat