How to grab mouse click from graph panel


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!

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.

1 Like

I thought there was a more elegant way.

Anyway, thanks a lot!

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

How would you do it in Angular without changing the Graph panel code? Are you thinking a directive like this:

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.

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:

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?

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.