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!
I am using the version of the highlighter plugin on the following link:
https://github.com/tryolabs/jqplot-highlighter
The parameters I am using:
highlighter: {
show:true,
tooltipLocation: 'n',
tooltipAxes: 'pieref', // exclusive to this version
tooltipAxisX: 20, // exclusive to this version
tooltipAxisY: 20, // exclusive to this version
useAxesFormatters: false,
formatString:'%s, %P',
}
The new parameters ensure a fixed location where the tooltip will appear. I prefer to place it on the upper left corner to avoid problems with resizing the container div.