is there a way to Include the series label in highlighter tooltip

4,833 views
Skip to first unread message

Matthew

unread,
Mar 12, 2010, 6:56:23 PM3/12/10
to jqplot-users
Is there a way to include a series label in the highlighter module
tooltip? I think it must be possible using format string.

I would try something like:
highlighter:{
show:true,
sizeAdjust:7.5,
useAxesFormatters:true,
formatString:'series.label - x: %s , y: %s'
}

As an example for what i'm trying to do, lets say i'm plotting 3
stocks on the same graph. My series labels (the ones that show in the
legend) could be GM, Ford, and Toyota. I want to be able to mouse over
a point on lets say the Ford line and see a tool tip like:
Ford - x: 2010-03-10 , y: $2.25

For my example with only three lines the colors alone would be enough
to tell apart the lines, but this would be useful in the event that
you have a large number of lines plotted on the same graph. Lets say
10-15 (or more) lines on the same graph colors start to look the same.
It can be hard to distinguish between them. It would be nice to be
able to mouse over the line and tell which one it is.

mabra

unread,
Mar 14, 2010, 6:43:52 AM3/14/10
to jqplot-users
Hi !

Good post! I'll just say, that I would like to see exactly this tinggy
too!

Best regards,
--mabra

Matthew

unread,
Mar 16, 2010, 1:41:39 PM3/16/10
to jqplot-users
I found kind of a hacky way to do this. I don't know if there is an
easier way.

In the file jqplot.highlighter.js there is a function called
showTooltip. This function is what is called to create the tool tip
that is displayed with hovering over a point on a plot using the
highlighter plug in.

The function takes 3 inputs: plot, series, and neighbor.
series is an object that holds all the information about the series.
This is the one we're interested in. series.label is a string that is
equal to whatever you named the series when setting up the plot. It is
the label that shows up in the legend.

to get my desired effect I just added the line:
str = series.label + ": ";
str += xstr;

I just put that line directly in the case statement that creates the
tool tip for the format i was using (useAxesFormatters=true &
tooltipAxes='xy').

mabra

unread,
Mar 16, 2010, 2:09:40 PM3/16/10
to jqplot-users
Hello !

Good tip, thanks!

br--
mabra

S'pht'Kr

unread,
Dec 10, 2012, 9:18:43 AM12/10/12
to jqplot...@googlegroups.com
I know this is an old post, but if anyone's still looking for a solution to this, I found one.

Newer versions (at least) of jqplot.highlighter.js have an undocumented option you can pass called tooltipContentEditor, which accepts a callback function. The function takes four parameters and returns a string which is used as the content of the tooltip. I used it like so:


                highlighter: {
                    show: true,
                    sizeAdjust: 7.5,
                    tooltipLocation: 'n',
                    useAxesFormatters: true,
                    tooltipContentEditor: function(str, seriesIndex, pointIndex, plot){
                        return seriesLabels[seriesIndex].label + ': ' + str;
                    },
                    tooltipAxes: 'y',
                    showMarker: false
                },

The first parameter is the tooltip string already formatted with tooltipFormatString or formatString. The function must return the modified string to be used in the tooltip. Works a treat!

-Matt

Mark DL

unread,
Feb 27, 2015, 9:36:32 AM2/27/15
to jqplot...@googlegroups.com
Nice solution!, works till now.

Though I'd like to correct one part, nothing big.


   tooltipContentEditor: function(str, seriesIndex, pointIndex, plot){
                        return seriesLabels[seriesIndex].label + ': ' + str;},

to

   tooltipContentEditor: function(str, seriesIndex, pointIndex, plot){
                        return plot.series[seriesIndex]["label"] + ': ' + str;},

Thanks again!
Reply all
Reply to author
Forward
0 new messages