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.
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]; }
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!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With