Execute Function on Double-Click with Flot.js

Is there a way to run a function when the mouse double-clicks while using flot? Currently, I am only able to trap the single click with the following code:

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

If I try using dblclick, I lose access to the item and only have the event:

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

How can I implement double-click functionality with flot? Specifically, I need to retrieve the name of the bar chart that was double-clicked.

Update: A working fiddle can be found here.

Update 2: This informative post explains how to obtain bar chart details by storing the item in a variable during plothover. Now, the challenge is to make plotclick and dblclick work harmoniously together: Check out the updated fiddle here.

Answer №1

After researching solutions on this thread

I ultimately chose to implement the code from this JSFiddle example

const DELAY = 200;
let clicks = 0;
let 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
       }      

     }
 });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

jQuery loops through form fields and sets them as disabled

Trying to solve a question... In a form with multiple inputs, I only need to loop through the ones inside the div tagged player. <div class="player"> <input type="text" value="0" class="unit" /> <input type="text" value="0" class="unit" ...

Ways to apply autofocus to one element once another element already has it?

I have encountered an issue while attempting to give a textarea autofocus using the autofocus attribute. Upon doing so, I receive an error message in the console that says: Autofocus processing was blocked because a document already has a focused element. ...

What are the steps for testing React components when they are wrapped by ThemeProvider/withStyle?

Is there a way to properly test a component that is wrapped with withStyle, as it seems the theme object does not pass through the component. Any suggestions on best practices for achieving this? I am considering using createShallow() and dive() methods t ...

Decrease initial loading time for Ionic 3

I have encountered an issue with my Ionic 3 Android application where the startup time is longer than desired, around 4-5 seconds. While this may not be excessive, some users have raised concerns about it. I am confident that there are ways to improve the ...

Protractor: Decrease the magnification

Currently, I am working with protractor and facing the challenge of zooming out to 50%. Despite trying numerous solutions found on StackOverflow, none have successfully resolved the issue. Some attempted solutions include: browser.actions().keyDown(protra ...

Ensuring Data Accuracy Prior to Saving in Zend Framework 1.12

My form includes validations and a function to save data using ajax. Here is the structure of my form: <form name="enquiry_form" method="post" id="enquiry_form"> Full Name: <input name="name" id="name" type="text" pattern="[A-Za-z ]{1,20}" on ...

In VueJS, the v-for directive allows you to access both parameters and the event object within

Imagine having nested elements that repeat using v-for in the following structure: <div id="container"> <div v-for="i in 3"> <div v-for="j in 3" v-on:click="clicked(i,j)"> {{i+&a ...

Introduce a pause interval between successive ajax get calls

I've created a script that uses an ajax GET request when the user reaches near the end of the page. $(function(){ window.addEventListener('scroll', fetchImages); window.addEventListener('scroll', fetchNotifications); }); ...

Automatically adjust text size within div based on width dimensions

Dealing with a specific issue here. I have a div that has a fixed width and height (227px x 27px). Inside this div, there is content such as First and Last name, which can vary in length. Sometimes the name is short, leaving empty space in the div, but som ...

Transform text that represents a numerical value in any base into an actual number

Looking to convert a base36 string back to a double value. The original double is 0.3128540377812142. When converting it to base 36: (0.3128540377812142).toString(36); The results are : Chrome: 0.b9ginb6s73gd1bfel7npv0wwmi Firefox: 0.b9ginb6s73e Now, h ...

Tips for defining boundaries for position absolute elements using JavaScript

Fiddle. I am in the process of developing a chat/mail application with a resizable menu similar to the Google Hangouts desktop app. When resizing the brown content pane at a normal speed, you can observe that the boundaries are functioning as intended. My ...

Is there a way to set the content to be hidden by default in Jquery?

Can anyone advise on how to modify the provided code snippet, sourced from (http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_show), so that the element remains hidden by default? <!DOCTYPE html> <html> <head> <scrip ...

How to add an item to an array in JavaScript without specifying a key

Is there a way to push an object into a JavaScript array without adding extra keys like 0, 1, 2, etc.? Currently, when I push my object into the array, it automatically adds these numeric keys. Below is the code snippet that I have tried: let newArr = []; ...

"Deleting a specific row from a SQL Server using Node.js: Step-by-Step Guide

Currently, my setup involves using nodeJs as the backend language and sql server as the database. While I have managed to delete whole table rows from the database successfully, I am facing a challenge when it comes to deleting a specific row. Here is the ...

How can we best understand the concept of custom directives using the link method?

As a beginner in AngularJS, I am looking to implement an autocomplete feature for text input. My JSON data is stored in JavaScript and I need help simplifying the process. Can you provide me with a straightforward solution? The specific requirement is to ...

To apply a background color to a specific <td>, simply enter the position number into the 3rd textbox using JavaScript

I have successfully implemented three textboxes in my project. The first textbox is for entering a number as the row count The second textbox is for entering a number as the column count The third textbox is used to specify a position in the table that ...

Use JavaScript to swap out various HTML content in order to translate the page

I am currently facing a challenge with my multilingual WordPress website that utilizes ACF-Field. Unfortunately, WPML is not able to translate the field at the moment (2nd-level-support is looking into it). As a solution, I have been considering using Java ...

AngularJS continues to display an "Invalid Request" message whenever the requested resource is unavailable

When I try to fetch a group of images through AJAX and exhibit them on the page using ng-repeat, an issue arises with the image source tags. These tags send incorrect requests to the server before the collection is retrieved, leading to error messages in t ...

What is the secret to remaining on the same spot even after the page is reloaded?

How can I maintain the AJAX call data after a page reload? I have attempted to use code that reloads the entire page, but I would like to stay in the same location. Is there a way to achieve this without reloading the entire page? $('#updateAddressPr ...

Is it possible to pass an AngularJS ng-form object as a parameter in ng-if?

When I try to preview, the save button in my preview mode remains enabled. You can view the code snippet here: http://plnkr.co/edit/I3n29LHP2Yotiw8vkW0i I believe this issue arises because the form object (testAddForm) is not accessible within the ng-if s ...