Question

I have a jqPlot Line graph and I am trying to work out how to customise what the highlighter text is for the X value.

So. I have the following:

var line1=[100, 68, 63, 36, 28];
var line2=[100, 71, 68, 42, 32];
var line3=[100, 60, 45, 15, 5];
var line4=[100, 76, 58, 22, 8];
var plot3 = $.jqplot('chart3', [line1,line2,line3,line4], {
axes:{
      xaxis: {
               ticks: [  [1, 'group1'], 
                         [2, 'group2'], 
                         [3, 'group3'], 
                         [4, 'group4'], 
                         [5, 'group5']
                      ],
               tickOptions:{
                      showGridline: false,
               },
            },
      yaxis:{
             label:'Percentage',
             labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
             min : 0,
             max : 100,
             pad : 0,
             numberTicks : 11,
            }
    },

Which displays the graph correctly, with the X-Axis reading group1 group2 etc…
however when I add the highlighter option and for example hover over line1 tick 2 the box displays “2.0, 68”. What I would like it to do is display “group2, 68”.

I have tried playing with the formatString parameter but cannot get it to work.

could someone point me in the right direction?

thanks.

Answer 1

I can come up with a solution, maybe not the best one, but the most appropriate one that I could quickly think of considering the code you showed. It involves the use of the below code. Basically on every mouse move, where the neighbour is not null (this is the condition used for showing of the highlighter tooltip) I am changing the tooltip to one I like.

$("#chart").bind('jqplotMouseMove', function(ev, gridpos, datapos, neighbor, plot) {
    if (neighbor) {
        $(".jqplot-highlighter-tooltip").html("" + plot.axes.xaxis.ticks[neighbor.pointIndex][1] + ", " + datapos.yaxis.toFixed(2) + " Oi");
    }
});

For a working code sample please see.