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

Using jQuery to toggle CSS properties

I'm having trouble switching between a CSS column layout and a normal layout for a div element with the ID 'article'. The jQuery script I wrote doesn't seem to work properly, as the entire thing disappears. Can anyone advise me on how t ...

Error: The function row.child.hasClass is not a recognized function

My challenge is creating row details for DataTables without using Ajax. I have implemented something like this: $(document).ready(function () { function format ( name, value ) { return '<div>Name: ' + name + '<br /> ...

Event cancellation received from IncomingMessage

I have a simple express server running on Node with versions 4.13.3 and 4.2.3, respectively. //initialization code app.put('/', function(req, res) { req.on('close', function() { console.log('closed'); }); req.on( ...

Tips for showcasing a blurry image in NextJS while it's in the process of being fetched?

Is there a way to achieve a similar effect like the one showcased below? I've managed to do something similar with Gatsby, but I'm curious if it's achievable with NextJS as well. ...

Exploring Angular2: A Guide to Interpolating Expressions in Templates

Is it possible to interpolate different types of Javascript expressions? Along with displayed properties like object.property and short expressions such as {{1+1}}, what other valid Javascript expressions can be used for interpolation? ...

Issue with loading Babel preset in a monorepo setup

I'm working with a monorepo setup using Lerna and it's structured as follows: monorepo |-- server |-- package1 |-- package2 All packages in the repo make use of Babel. After installing all 3 projects, yarn copied all the required @babe ...

How to send a value to a function in Angular from a different function?

Within my Angular Typescript file, I am working with two functions named data and lists. My goal is to pass the variable windows from the function data to the function lists. However, when attempting to call the function lists, I encounter an error: Canno ...

Table cell featuring a status menu created with Material UI DataGrid

I'm looking to include a column called "Filled Status." Although I've checked the documentation, I can't quite figure out how to do it. It seems like I may need to use renderCell when setting up the column, but I'm not sure how to make ...

What is the best way to configure dependencies for a production deployment when utilizing Babel within the build script?

From what I understand, Babel is typically used for compiling code, which is why it usually resides in devDependencies. However, if I incorporate the Babel command into my build script and want to run npm install --only=prod before running npm run build d ...

Guide on creating my inaugural HTML embeddable widget?

A client recently requested me to create a JavaScript (MooTools)/HTML/CSS/PHP based game as a deployable widget. This will be my first time developing a widget, so I am seeking advice and insights to help me navigate any potential challenges from experie ...

Utilizing a JavaScript Library in your Scala.js Project: A Step-by-Step Guide

I am currently following a tutorial on setting up dependencies in my Scala.js project. Here is the link to the tutorial: First and foremost, I have organized my project setup as shown below: https://github.com/scala-js/scalajs-cross-compile-example Wi ...

Continuously running React useEffect even with an empty dependency array

In my React application, I have implemented a hook system. Each sub-hook that is generated within this main hook is assigned a unique ID automatically. This ID is incremented by 1 every time a new sub-hook is created, ensuring uniqueness. const App = ...

Synchronization issue between Material UI SelectField component and state is observed in React/Redux setup

My issue involves the LayoutSelector component which contains a drop-down form that updates the state.plate.layout. The state is passed as a prop to the component. On my local machine, the selected menu item accurately reflects the state changes - when a n ...

Using sl-vue-tree with vue-cli3.1 on internet explorer 11

Hello, I am a Japanese individual and my proficiency in English is lacking, so please bear with me. Currently, I am using vue-cli3.1 and I am looking to incorporate the sl-vue-tree module into my project for compatibility with ie11. The documentation menti ...

What are the best practices for integrating Firebase authentication pre-made UI in Next JS?

As someone new to React and NextJS, I am eager to implement an authentication service for my NextJS web application in order to manage user accounts efficiently. I am particularly interested in utilizing a familiar user login solution that offers a compre ...

Why is the value in my React Redux state not updating as expected?

I recently started learning react js as a beginner. To practice, I created a crud app and integrated firebase for authentication. However, I'm facing an issue where I'm not able to retrieve the updated value. Index.jsx At line 11, I'm stru ...

The localhost server in my Next.js project is currently not running despite executing the 'npm run dev' command. When trying to access the site, it displays an error message saying "This site can't be

I attempted to install Next.js on my computer and followed the documentation provided to set up a Next.js project. You can find the documentation here. The steps I took were: Ran 'npx create-next-app@latest' Was prompted for the name of my proj ...

The Next.js 404 error page seems to be malfunctioning. Any ideas on what might be causing this issue?

Whenever I attempt to access a non-existent route, the home page loads without changing the URL. My expectation was to see a 404 error page. To handle this issue, I created a custom error page called pages/_error.js import Page404 from './404'; ...

NPM encountered an issue that prevented it from scanning directories due to a permission denial with the error code E

Whenever I type "npm run build:prod" build:prod npm run build -- --configuration production --aot --optimization=false I encounter the following error: > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="82e4e3ece1fbafece3 ...

How to access previous Redux state when navigating back using the Back button

Imagine a search page equipped with a search bar and various filters for the user to customize their data retrieval. As the user selects different filters, an API call is made to fetch updated data and the route path is also adjusted accordingly. However ...