Enabling the jqPlot highlighter to use tick labels instead of tick indices.

Background

So I'm a big fan of jqPlot, which we've been using in our project for our graphing page. Right now it's coming along pretty, well, we even have Real Data now.

Real Data.

Now, one "gotcha" you have to watch out for in jqPlot is how non-numeric data points are rendered. For example, let's say we have a plot of cities versus year. Our x-axis is simple, it's just numeric year values. On the

y-axis however, we have city names. Now I'd expect a decent graphing library to be handle non-numeric axes just as well as numerical ones. It would be "good enough" to just display the data points in no particular order, but even better if you could specify a custom comparator. Right now we handle that server-side and just send a pre-sorted list to the client for jqPlot to render.

The Problem

The way jqPlot handles these text data points is a little awkward (unless I'm missing something). Instead of specifying a point such as (1986, "Boston"), you specify (1986, 0) and then have a list of tick labels, where ticks[0] = "Boston."

So a little weird, but not deal-breaking. However, if you try and use one of jqPlot's plugins called the Highlighter, things don't work so well. Highlighter enables displaying of the x/y values when you hover the mouse over a data point on the graph. Unfortunately, if your data point is (1986, 0), it will display "1986, 0" instead of "1986, Boston." Not good.

As far as I can tell, it's not possible to use highlighter to display string values instead of the tick index. So, being bored and not wanting to study for a chemistry class, I dived into the jqPlot highlighter source to change that.

The Source Code

After spending some time in the source code and experimenting through Firebug, the relevant function responsible for displaying the data point is called showTooltip. This function first sets up a list of y-values (since a series can have more than one y-value), and then adds the x-values depending on the options specified.

For example, the relevant line of code to display the y values of the data point is:

ystrs.push(yf(yfstr, neighbor.data[i]));

 Where neighbor.data[i] is the actual value of the data point, yf is a function that formats the string to be displayed, and yfstr is the "format string" which follows the conventions similar to sprintf.

How do we change this so that it will display the tick mark value instead of just the y tick index? Well, it turns out that showTooltip is passed a series object, which contains the ticks array already. The exact name of the array is series._yaxis._ticks. There is also one for the x axis.

How do we know the tick index? Our y data point will indicate it, so that the line above can become:

ystrs.push(yf(yfstr, series._yaxis._ticks[neighbor.data[1]].label));

 Where neighbor.data[1] is the first y-value. Since we don't want this to happen all the time (just for non-numeric data points), we can add a few parameters to the highlighter plugin to specify whether to enable displaying of tick labels or not. In our situation, we know when to enable it because numeric data points have no associated ticks array that's sent by the server. Some similar modifications for the x-axis give us the results we want:

jqPlot modified Highlighter plugin in action

Success!

Now you ask, why go through all this hassle? Well, our particular reason was that we can have too many data labels (such as 50 cities) so the client will cut off displaying them. This way, the user can still hover over interesting data points and see what the values are.

For anyone interested, the modified highlighter plugin is hosted on my website. The relevant Highlighter parameters to set are useXTickMarks and useYTickMarks.