jqplot - use images as ticks

Question

I want to be able to have, instead of 1 - 10 on the y axis have pictures instead, my example is smiley faces. A happy one for 10 and a sad one for 1.

Is there any way to set images as the ticks, has anyone managed this at all, or does anyone know how to use hooks or custom renderers to do this?

Thanks

Tom

Answer 1

axis ticks are just divs inside the graph's div. you can get a collection of them and replace their HTML with your own. e.g. assuming you have images named "smiley-XX.png" with XX being a number you could do it so:

var i = 0;
$('#id-of-jqplot-div').find('.jqplot-yaxis').find('div.jqplot-axis-tick').each(function(){
   $(this).html('<img src="smiley-'+i+'.png">');
   i++;
});