Run Function On Double-Click Using Flot.js

Question

How do I run a function when the mouse double-clicks when using flot? If I do the following it only traps the single click.

$(graph).bind('plotclick', function(event, pos, item) {
    if (item) {
      ....
      item.series.data[0][2].key
    }
}

If I use the dblclick I only have the event and no longer have the item.

$(graph).bind('dblclick', function(event) {
      ....
}

How do I use double-click with flot? I need to get the name of the bar chart that I am double-clicking on.

Edit: See here for a fiddle http://jsfiddle.net/hcszv7wb/1/

Edit 2: This post helps get the bar chart details by assigning the item to a variable in plothover. I just need to work out how to have the plotclick and dblclick work together now. http://jsfiddle.net/hcszv7wb/2/

if you set a double-click event on an element that has an "onclick" event, it would make the "onclick" event bound before the doubleclick event bound when you doubleclick it. — Oki Erie Rinaldi, Dec 24 '14 at 06:30

score 1 · Accepted Answer · edited May 23 '17 at 12:14

Using https://stackoverflow.com/a/7845282/1000011

I settled on http://jsfiddle.net/hcszv7wb/3/

var DELAY = 200;
var clicks = 0;
var timer = null;

 $("#placeholder").bind("plotclick", function (event, pos, item) {       
     if (item) {
       clicks++;  //count clicks
       if(clicks === 1) {
           timer = setTimeout(function() {
               //perform single-click action
               alert("item " + item.dataIndex + " in " + item.series + " clicked");
               chart.highlight(item.series, item.datapoint);
               clicks = 0;  //after action performed, reset counter
           }, DELAY);

       } else {
           clearTimeout(timer);  //prevent single-click action
           //perform double-click action
           alert('Double Click');  
           clicks = 0;  //after action performed, reset counter
       }      

     }
 });

Run Function On Double-Click Using Flot.js

1 Answers1