Thursday, 15 July 2010

mouseevent - JqPlot EnhancedLegendRenderer with Mouse events -



mouseevent - JqPlot EnhancedLegendRenderer with Mouse events -

i using jqplot display graph legends on jqplotmouseenter, , jqplotmouseleave events.

here 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 above code, when cursor moved on actual legend within graph, legend 'flickers' , user cannot utilize enhancedlegendrenderer shown/hide corresponding series in plot.

how can above feature working?

thanks in advance.

edit

here 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" } } ] } );

what's happening here jqplotmouseleave event beingness raised when come in legend, causing not displayed, raises jqplotmouseenter (when legend hidden, of sudden come in plot), causing shown. because of cycle, flickering.

try changing 'jqplotmouseleave handler 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 hide legend if mouse cursor location not contained within legend's bounding box.

mouseevent show-hide jqplot legend legend-properties

No comments:

Post a Comment