Plotly.js: Events without jQuery

[adoveil]

Hi ! and thank you for opening Plotly.js !

I am trying to catch click events as well as the exemple works but without jQuery.

Documentation Highlights writes there is no jQuery inside Plotly so i assume it is possible to do that but my knowledge is limited :/

Here is my chart if it helps !
http://codepen.io/anon/pen/xwBMMM

Thank you very much.

[etpinard]

The non-jQuery plotly.js event syntax is the following:

graphDiv.on('plotly_click', function(eventdata) { 
    /* callback goes here */ 
});

where eventdata has the following structure:

{
  points: [
     curvernumber: 1,  // index of the curve clicked on
     pointnumber: 1, // index of the point clicked on
     x: 1,  // x coordinate clicked on
     y: 1,  // y coordinate clicked on
     data: {},      // trace object of this curve
     fullData: {}, //  full trace object (that includes the defaults) of this curve
     xaxis: {},  // layout xaxis object corresponding to this curve
     yaxis: {}   // '' yaxis ""
  ]
}

We haven't made any documentation example with this syntax yet, so I can only refer you to the source code and the tests for more information. I hope this helps.

[adoveil]

Thank you very much I didn't know where to search in the code & I was focused on a document.getElementById answer...

Solved.

[etpinard]

No worries. :beers:

[napengam]

Thank you ! It works now :-)

[dev-sandeep]

Thanks @etpinard was struggling with this problem from last half hour.

[prasadrajacse]

I am trying to use it angular 2 project but it is returning the error
Property 'on' does not exist on type 'HTMLElement'.

let myPlot = document.getElementById('donutChartHigh');
myPlot.on('plotly_click', function(data){
console.log(data.points[0].label);
});

[rreusser]

@prasadrajacse That should work (even in angular 2, think?—plotly is just js), so a couple thoughts:

1. are you calling this after the plot has been created?
2. is that the correct element and not a container or other div (duplicate id maybe)?

Beyond that, if the div has been created correctly it should work. If you can reduce it to a simple example on codepen, it'd be possible to help a bit more.

[n-riesco]

@prasadrajacse Since myPlot is obtained from document.getElementById, you'll have to use myPlot.addEventListener.

on works on D3 selections.

[glampr]

@n-riesco, thanks for mentioning the use of addEventListener instead of on for HTMLDivElement.
I'm also using angular2 and getting obtaining the myPlot variable using angular's ElementRef, and accessing the div using elementRef.nativeElement.
I then use addEventListener on that, and I can verify in Chrome that the event has been attached to the div.
However my callback function never gets fired.

This is a sample code that is not working for me:

      Plotly.newPlot(this.container.nativeElement, this.data, layout, options);
      this.container.nativeElement.addEventListener('plotly_selected', (eventData) => {
        console.log('plot selection %o', eventData);  // NEVER fires!
      });

Is there something different than what's in the documentation when using addEventListener instead of on?

[n-riesco]

@glampr My previous comment is wrong. Now, I know that Plotly overwrites some methods in the node; namely emit, on, once, removeListener and removeAllListeners. See the relevant code here.

Note that Plotly doesn't overwrite dispatchEvent, addEventListener, removeEventListener or the on* event handlers.

From a user point of view, what this means is that:

• listeners registered with on and once only receive plotly_* events or events triggered by emit;
• whereas listeners and handlers registered with addEventListener or on* only receive events triggered by the DOM or dispatchEvent.

Here's a codepen that demonstrates the difference.

[glampr]

@n-riesco thank you for your clarification.

My event listeners now work using on.

My main issue was that I was trying to capture a 'plotly_selected' event in a line chart, which I now realize is not supported. In order to capture the user's "zoom selection" in that kind of chart I need to listen for the 'plotly_relayout' event and take note of the xaxis.range[] properties.

Maybe this could be added in the documentation?