Creating axis labels in jqplot clickable

Question

How can I make the axis labels (on the X axis) clickable.

If this is less problematic, it’s normal that a click will result in a new link (and not some javascript code)

Is there any way to do this?

Thanks Boaz.

Answer 1

Here is a simple script:

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

The most important thing that happens above is that zIndex set to 1 so that it is above the canvas object. Now you can click on it. The cursor style just makes it have this friendly rollover mouse icon. Now you can do whatever you want in the click event.

Answer 2

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

Axis tick CSS class now ends with -tick instead of -label

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

Answer 3

Depends on what you expect from the behavior after clicking a category

Ticks generator is located in the file: jqplot.axisTickRenderer.js

You can download 1) modify the code to give each #id tick and attach the behavior using your own jquery code

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