CODEWITHSUNDEEP
jqplot
jpen
jpen

Reputation: 2147

jqPlot - How to catch double click event

I'm using the latest version of jqPlot (v1.0.0b2_r1012) to plot my histograms.

To catch a single click event I'm using 'jqplotDataClick' as follows:

$('#myHistogram').bind('jqplotDataClick', function(ev, seriesIndex, pointIndex, data) {
    // Do something
});

Is it possible to catch a double click event instead?

Unfortunately I've been unable to find such event in jqplot.barRenderer.js.

Update:

I've made the following two changes to my jqplot.barRenderer.js file:

Register jqplotDblClick event

$.jqplot.BarRenderer.prototype.init = function(options, plot) {
    ...
    ...
    plot.postInitHooks.addOnce(postInit);
    plot.postDrawHooks.addOnce(postPlotDraw);
    plot.eventListenerHooks.addOnce('jqplotMouseMove', handleMove);
    plot.eventListenerHooks.addOnce('jqplotMouseDown', handleMouseDown);
    plot.eventListenerHooks.addOnce('jqplotMouseUp', handleMouseUp);
    plot.eventListenerHooks.addOnce('jqplotClick', handleClick);
    plot.eventListenerHooks.addOnce('jqplotDblClick', handleDblClick);
    //$.jqplot.eventListenerHooks.push(['jqplotDblClick', handleDblClick]); I've also tried this but without any luck
    plot.eventListenerHooks.addOnce('jqplotRightClick', handleRightClick); 
};

Implement handleDblClick function

function handleDblClick(ev, gridpos, datapos, neighbor, plot) {
    if (neighbor) {
        var ins = [neighbor.seriesIndex, neighbor.pointIndex, neighbor.data];
        var evt = jQuery.Event('jqplotDataDblClick');
        evt.pageX = ev.pageX;
        evt.pageY = ev.pageY;
        plot.target.trigger(evt, ins);
    }
}

And then I bind jqplotDataDblClick in my JavaScript file as follows:

$('#myHistogram').bind('jqplotDataDblClick', function(ev, seriesIndex, pointIndex, data) {
    alert("Ohayo!"); // Good morning in Japanese
});

However the double click event doensn't get fired when I double click on one of my vertical bar graphs. I've tried binding "jqplotRightClick" but that doesn't work either. If I use "jqplotClick" then everything works as expected.

Does anyone know what I am doing wrong here?

Update 2:

RE: I've tried binding "jqplotRightClick" but that doesn't work either. (see above)

I've just found out that in order to catch this event you have to set the following:

captureRightClick: true,

See: How to capture right click event

Upvotes: 1

Views: 4236

Answers (1)

Mark
Mark

Reputation: 108567

From the "cursor" plugin, they handle it like this:

if (c.dblClickReset) {
  $.jqplot.eventListenerHooks.push(['jqplotDblClick', handleDblClick]);
}

EDITS

I can capture the double click by just binding the 'jqplotDblClick'. I did not have to push the event. Sorry for the misdirection, my answer above meant to show that the event already existed. See working fiddle here. The only additional thing I added was CSS rules to make the div un-selectable since a double-click will select it.

HTML:

<div id="chart1" style="margin-top:20px; margin-left:20px; width:300px; height:300px; -moz-user-select: -moz-none;-khtml-user-select: none;-webkit-user-select: none;-ms-user-select: none;user-select: none;"></div>​

JS:

$(document).ready(function(){
        $.jqplot.config.enablePlugins = true;
        var s1 = [2, 6, 7, 10];
        var ticks = ['a', 'b', 'c', 'd'];

        plot1 = $.jqplot('chart1', [s1], {

            seriesDefaults:{
                renderer:$.jqplot.BarRenderer
            },
            axes: {
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer,
                    ticks: ticks
                }
            }
        });

        $('#chart1').bind('jqplotDblClick', 
            function (ev, seriesIndex, pointIndex, data) {
                alert('hi');
            });
});

Upvotes: 1

Related Questions