How to grab mouse click from graph panel


#1

Hi!

Can I grab click event on default graph panel and use it in my own custom panel?
In particular, I would like to…

…with one click.

Any suggestion?
Thanks so much!


#2

The hacky way to do it would be to find the element in the DOM with jQuery and add an event handler. Not sure if there is a more elegant way to do it.


#3

I thought there was a more elegant way.

Anyway, thanks a lot!


#4

Why can’t you use Angular? Am running into this issue myself.


#5

How would you do it in Angular without changing the Graph panel code? Are you thinking a directive like this: https://stackoverflow.com/a/30222345/22688

Not sure how you would do that from a plugin which is dynamically loaded on start and it is basically the same thing as using jQuery (or plain JS) to add an event handler.


#6

We’re writing a grafana plugin, and use Angular for that to better integrate with Grafana. I don’t have much experience with Angular, but thought I would be able to add a ng-click handler to an element and have the callback live in the plugin code.

I see your point about using jquery event handlers being basically the same, but I’d be happier if I could solve it with Angular code in my Angular component :slight_smile:


#7

Oh yes, that is absolutely fine for your plugin.

I thought though that this question was about listening to events from the graph panel which is core Grafana - so I’m not sure how you would add an ng-click to the graph panel from your plugin code?


#8

Oh, I might have misunderstood the first question.

I’ve added an editor tab and wanted to listen for a button click to know when to save settings - but later I learned about how to use ctrl.panel to tie html input elements to keys stored off on the panel object. So, the ng-click event was on an element in the html template I render in the editor tab.