Question

I have a jQplot with the following options:

options= {
                title:"Results", 
                legend:{
                   renderer: $.jqplot.EnhancedLegendRenderer,
                   show:true,
                   labels:result,
                   rendererOptions:{
                       numberRows:null,
                       numberColumns:4,
                       seriesToggle:"fast",
                       disableIEFading:true
                   },
                   placement: 'outsideGrid',
                   location: 's'
                },
                axes:{xaxis:{renderer:$.jqplot.DateAxisRenderer, tickOptions:{formatString:'%Y-%m-%d %H:%M'}},
                      highlighter: {

                       sizeAdjust: 10,

                       tooltipLocation: 'n',

                       useAxesFormatters: false,

                       formatString: 'Hello %s dayglow %d'

                   }
                },
                   cursor:{ 
                      show: true,
                      zoom:true, 
                      showTooltip:false
                   } };

I would like the highlight to disable when a line is hidden. Currently, if you hover over a datapoint that is invisible the highlighter still shows up. Is there a way to do this?

Answer 1

I’ve managed to find a solution. I’m curently using jqplot version 1.0.0b2_r1012.

Go to enhancedLegendRenderer.js(take care whether you included that file or .min.js) and fix handleToggle function(line 219) to look like this:

var handleToggle = function (ev) {
    ev.data.series.toggleDisplay(ev);
    if (ev.data.series.canvas._elem.hasClass('jqplot-series-hidden')) {
        $(this).addClass('jqplot-series-hidden');
        $(this).next('.jqplot-table-legend-label').addClass('jqplot-series-hidden');
        $(this).prev('.jqplot-table-legend-swatch').addClass('jqplot-series-hidden');
        ev.data.series.showHighlight = false;
    }
    else {
        $(this).removeClass('jqplot-series-hidden');
        $(this).next('.jqplot-table-legend-label').removeClass('jqplot-series-hidden');
        $(this).prev('.jqplot-table-legend-swatch').removeClass('jqplot-series-hidden');
        ev.data.series.showHighlight = true;
    }
};

I’ve added lines:

ev.data.series.showHighlight = false;

and

ev.data.series.showHighlight = true;

Caution: This fix is not a long term solution! Next time you update the jqplot, you must also update these lines. Before updating these lines, check weather this bug has been fixed in that jqplot version.