Grafana iframe return a refreshed 'from' and 'to' values after zoom in/zoom out of graph x axis

Grafana Dashboards
1

Is there a way I can do it with the latest version of Grafana?

In summary, I want that Grafana return the from/to values after applying any king of zoom on an iframe graph.
I need this because I have 2 graphs being displayed on screen (both using iframe) and I want them x axis synced.

I am aware that the url updates when you are at a Grafana page, but there’s no way I can read the updated from/to values after user perform clicks as there isn’t any relevant info being updated on iframe. Not even the ‘src’ attribute from iframe.

One idea that came to me is to use the iframe’s contentWindow.postMessage . Is it a way forward? If so, how can I use this?

Please, let me know if there’s other alternatives.

NOTE: Grafana server is on a Nginx reverse proxy and front client (Angular) on localhost, so “target origin and recipient origin doesn’t match” errors can happen.

2

Any updates on this? Could you find a way to update both charts by zooming?

3

Hi, just a tip:
Your question is is quite hard to follow. I think if you could rephrase it that would help a lot.

If I understand correctly you want to let your iFrame content know when the from/to changes?
For that you may want to have a look at the html graphics plugin.

4

We are also looking for a way to get the from and to values from the chartpanels.
Currently we have a dashboard that implements several panels from our grafanadashboard in iframes.
We want to capture the zooming event, or a way to get from and to values, from our zoomed in panel. This way we can handle the zooming in the other panels (iframes) too.
When we look at the src attribute of the iframe, we don’t see any changes when we zoom in.

Is there anyway we can make this happen?

5

The way I do it is by looking at the location.href of the iFrame. The to and from fields in this url reflect the current time-frame, and changes when the user zooms in or out.
This requires the iFrame’s content (your grafana dashboard) to be served from the same domain as the embedding application. This can be accomplished by using a proxy or load-balancer.