JqPlot EnhancedLegendRenderer with Mouse events

Question

I am using JqPlot to display some graph legends on the jqplotMouseEnter, and jqplotMouseLeave events.

Here is my code:

    $('#FinancialsLineGraph').bind('jqplotMouseEnter', function(ev, seriesIndex, pointIndex, data) {
            $('#FinancialsLineGraph .jqplot-table-legend').show();
    });
    $('#FinancialsLineGraph').bind('jqplotMouseLeave', function(ev, seriesIndex, pointIndex, data) {
            $('#FinancialsLineGraph .jqplot-table-legend').hide();
    });

With this above code, when the cursor is moved over the actual legend inside the graph, the legend 'flickers' and the user cannot use the EnhancedLegendRenderer to shown/hide the corresponding series in the plot.

How can I get this above feature working?

Thanks in advance.

EDIT

Here is my JS plot code.

var plotCogsLineGraph = $.jqplot('FinancialsLineGraph', [[30,31,34,40,45], [34,38,31,42,38]], 
{ 
            axes:
            {
                xaxis:
                {
                      ticks: ['5','4','3','2','1']
                },
                yaxis:
                {
                    label:'%',
                    pad: 1.05,
                    ticks: ['0','15','30','45','60']
                }
            },

            width: 480, height: 270,
            legend:{show:true, location: 's', placement: 'insideGrid', renderer: $.jqplot.EnhancedLegendRenderer},
    seriesDefaults: 
    {
                rendererOptions: {smooth: true}
    },
    series:[ 
                {
                    lineWidth:1, 
                    label:'COGS',
                    markerOptions: { size:1, style:'dimaond' }
                }, 
                {
                    lineWidth:1, 
                    label:'Wages',
                    markerOptions: { size: 1, style:"dimaond" }
                }
                ]
    }
);

I can't reproduce this one - it works fine in IE9, Chrome and FF. Can you show how the JS for how the plot is created? — nick_w, Feb 11 '13 at 21:44

nick_w · Accepted Answer · 2013-02-11T22:55:53.470

What's actually happening here is that the jqplotMouseLeave event is being raised when you enter the legend, causing it to not be displayed, which then raises the jqplotMouseEnter (when the legend is hidden, you all of a sudden enter the plot), causing it to be shown. Because of this cycle, you get the flickering.

Try changing your 'jqplotMouseLeave handler to this:

$('#FinancialsLineGraph).bind('jqplotMouseLeave', function(ev, seriesIndex, pointIndex, data) {
    var top, right, bottom, left;
    var legend = $('#FinancialsLineGraph .jqplot-table-legend');    
    top = legend.offset().top;
    left = legend.offset().left;
    bottom = top + legend.height();
    right = left + legend.width();

    if (!(ev.pageX >= left && ev.pageX <= right && ev.pageY >= top && ev.pageY <= bottom)) {
        $('#chart1 .jqplot-table-legend').hide();
    }
});

What this does is hide the legend only if the mouse cursor location is not contained within the legend's bounding box.

JqPlot EnhancedLegendRenderer with Mouse events

1 Answers1