Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
289 views

Javascript - Jqplot Tooltip On Bar Chart - Stack Overflow

Si necesitas realizar una personalizacion sobre los tooltips de primefaces, esta es una ayuda extraida desde el sitio web presente en el documento

Uploaded by

JaviAgredo
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
289 views

Javascript - Jqplot Tooltip On Bar Chart - Stack Overflow

Si necesitas realizar una personalizacion sobre los tooltips de primefaces, esta es una ayuda extraida desde el sitio web presente en el documento

Uploaded by

JaviAgredo
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

jqplot tooltip on bar chart

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.

javascript jquery graph charts jqplot

edited Feb 3 '11 at 17:52 asked Feb 3 '11 at 17:29


David butterywombat
5,867 4 33 56 1,242 7 19 41

3 Answers

¿No encuentras la respuesta? Pregunta en Stack Overflow en español. ✕

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];
}

answered Jul 26 '12 at 15:36


duckegg
793 2 10 19

Correct. That's what I was looking for. Thank you! – Tomasz Rozmus Aug 23 '12 at 0:15

great property/callback solution. That'd help me a lot. – brunobord Sep 18 '12 at 15:59

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!

edited Mar 12 '12 at 14:08 answered Feb 3 '11 at 23:14


Paul butterywombat
12k 4 43 53 1,242 7 19 41

4 You should totally share that here then to help anyone else with the same problem – jcolebrand Feb 3 '11 at
23:16

yeah I was thinking that :) done! – butterywombat Feb 3 '11 at 23:52

Excellent piece of code – user367134 Sep 29 '11 at 7:38

@butterywombat: I have the same problem as you now and I try to incorporate your code with mine and I
didn't see any changes on tooltip. I really new to jquery, would like to ask for some advice. especially on the
"#mychartdiv" and "#chartv", do I need to have those two define? Thanks a lot. :) – Ianthe Nov 16 '11 at 5:40

oh no, I didn't get that message...well replies a year later I think I didn't change '#chartv' into '#mychartdiv'
when I pasted my code to stack overflow. So I'm pretty sure #chartv is suppose to say #mychartdiv. You
would put these in the html file where you want the plot to appear – butterywombat Jan 16 '12 at 14:16

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.

edited Oct 5 '12 at 14:02 answered Oct 5 '12 at 12:17


Wagner Dias
81 1 4

You might also like