CODEWITHSUNDEEP
jqplot
Ross Rogers
Ross Rogers

Reputation: 24228

In jqplot, how can I get the data's tick label to appear in the tooltip on mouseover?

In jqplot, I have some data with x-axis labels. I'm trying to use the jqplot.highlight plugin to display the x-labels in the tooltip that pops up when I mouse over the points (see this js-fiddle page with the same code)

var wallclock_delta =  [ ["A", 1.78 ] , ["B", 0.02 ] , ["C", 0.23 ] ];
var wallclock_cummulative =  [ ["A", 1.80 ] , ["B", 1.82 ] , ["C", 2.05 ] ];

$.jqplot('chartdiv',  [wallclock_delta,wallclock_cummulative],{
    title: "Times",    
    axesDefaults: {
        tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
        tickOptions: {
          angle: -45,
          fontSize: '10pt'
        }
    },
    axes: {
        xaxis: {
            renderer: $.jqplot.CategoryAxisRenderer,
        },
        yaxis: {
            label: 'left_y_axis',
        },
        y2axis: {
            label: 'right_y_axis',
        }
    },
    highlighter: {
        show: true,
        sizeAdjust: 7.5,
        useAxesFormatters : true
    },
    series:[
        {yaxis:'yaxis', label:'wallclock_delta'},
        {yaxis:'y2axis', label:'wallclock_cummulative'}]

});

Unfortunately, I am getting an index into the series instead of the label: improper tooltip

How can I get the string labels I specified in the arrays wallclock_delta and wallclock_cummulative to appear when I mouse over the data points?

Upvotes: 1

Views: 1609

Answers (1)

Ross Rogers
Ross Rogers

Reputation: 24228

I found a hack around this issue. In my case, I can write a custom formatter for the xaxis ticks and if I detect an index into the data series instead of the string labels, I can return the string by looking into the original array. Otherwise, do the default behavior:

var my_special_x_axis_formatter = function (formatString, value) {
    var array_index = parseInt(value) || -1;
    if (array_index >= 0 && array_index < wallclock_delta.length) {
        return wallclock_delta[array_index][0];
    } else {
        return $.jqplot.DefaultTickFormatter(formatString,value);
    }

} 
$.jqplot[...]
    axes: {
    xaxis: {
        tickOptions:{formatter: my_special_x_axis_formatter}
[...]

And altogether on js-fiddle

Upvotes: 4

Related Questions