making the axis labels in jqplot clickable

Question

How can I make the axis labels (of a category X axis) clickable.

If it is less problematic, it is OK that the click will lead to a new link (and not some javascript code)

Is there a way I can do this?

Thanks, Boaz.

I'm not sure exactly what Boaz is looking for, but I am using CategoryAxisRenderer and hoping to have the labels be hyperlinks to other parts of my site. — Guy C, Jul 06 '11 at 12:08

score 4 · Answer 1 · answered Jul 08 '11 at 01:17

4

Here is a simple script:

$(".jqplot-xaxis-label")
    .css({
        cursor: "pointer",
        zIndex: "1"
    })
    .click(function(){ location.href = "http://google.com"; });

The most important thing happening above is that the zIndex is being set to 1 so that it sits above the canvas object. Now you can actually click it. The cursor style just makes it have that friendly rollover mouse icon. Now, you can do whatever you want inside the click event.

answered Jul 08 '11 at 01:17

Abishai Gray

525
2
7

change .jqplot-xaxis-label to .jqplot-table-legend for bar charts for example. works fine in current version – pila Mar 11 '13 at 20:22

score 2 · Answer 2 · edited May 23 '17 at 10:26

2

My answer is almost similar to Abishai Gray the difference being that it works with latest version of jqPlot (Version tested: 1.0.4)

The CSS class for Axis ticks now end with -tick instead of -label

$('.jqplot-xaxis-tick')
    .css({ cursor: "pointer", zIndex: "1" })
    .click(function () { alert('Axis Tick Clicked'); });

edited May 23 '17 at 10:26

Community

1
1

answered May 30 '13 at 00:01

I need to get the value of the label they click on, but I have not been able to figure out way to do that. Anyone know how I can get that in the click handler? – Larry Martell Jul 21 '15 at 22:49

score 0 · Answer 3 · answered Jul 05 '11 at 15:04

Depends on what you expect as behavior after clicking category

Generator of Ticks is in file called: jqplot.axisTickRenderer.js

You can
1) modify the code to give every tick #id and attach behavior with your own jquery code

2) list ticks in $(".jqplot-xaxis") and add behavior -| |-

making the axis labels in jqplot clickable

3 Answers3