Home > code, javascript, jquery > Linked labels for jqplot

Linked labels for jqplot

October 17th, 2009

In a typical bar-chart, the jquery plugin jqplot lets you set your x-axis labels to whatever string you want, including HTML mark-up. Imagine you have a chart showing the number of monthly downloads for prototype, jquery, and MooTools.

you might set your x-axis labels (values, to be precise) to

<a href=”http://www.prototypejs.org”>jquery</a>

<a href=”http://www.jquery.com”>jquery</a>

<a href=”http://www.mootools.com”>jquery</a>

The links get rendered in a <div> outside the canvas, but you cannot click them because the chart’s canvas extends over them.

solve it this way (using jquery for example):

$(’.jqplot-xaxis-tick’).css(’z-index’, 1000);

That sets your labels above the canvas and they can now be clicked.

Also reported at http://groups.google.com/group/jqplot-users/browse_thread/thread/bd9b9c49e609167e

  1. No comments yet.
  1. No trackbacks yet.
You must be logged in to post a comment.