3

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.

sanghavi7
  • 758
  • 1
  • 15
  • 38
Jake
  • 1,207
  • 2
  • 28
  • 46

2 Answers2

2

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.

Boro
  • 7,913
  • 4
  • 43
  • 85
  • 1
    Thanks for your response. This solution was quick and easy to use. just copy/pasted, changed the "#chart" to match mine and it worked. – Jake Jul 18 '12 at 02:35
1

Didn't try but this code seems to do what you are expecting https://gist.github.com/2422033

Here is the link on the JqPlot doc highlighter plugin. Check the tooltipAxes property

And here there is a link on a solution to display the series name on tooltip which is not suported by default. Check comment #1 https://bitbucket.org/cleonello/jqplot/issue/109/enable-highlighter-tooltip-to-display-label-of-the-series-on#comment-65301

sdespont
  • 13,915
  • 9
  • 56
  • 97
  • +1 for showing interesting links. Though I prefer to avoid changing the `jqPlot` script whenever I can avoid it, thus I provided a different answer. – Boro Jul 11 '12 at 15:03