Giraffe library - simultaneous zoom X of two charts on web-page

Dear all, could you be so kind as to help me to solve the next issue. I have two giraffe charts on my web-page. They have the same width, but represents the time series of different data. The data queries was done via GET request. I have using a zoom function (like zoom X and zoom Y) to see some details on charts, but now the charts are independent, and if I zoom X on one chart, on another chart xDomain is not changed. How can I connect zoom X for one chart with another? It lloks like I need to use a callback function onSetXDomain: () => { … }, but it is not clear for me how to implement it and receive the new xDomain.

@Alexander_Vel,
From a Giraffe engineer:
Theoretically, this should be possible. Any consuming app should be able to hook up two graphs that simultaneously zoom/unzoom. However, this is not a trivial thing to do and would require a deep understanding of Giraffe. As such, we (as developers/maintainers of Giraffe) feel that this is actually a good feature to have. We will create an issue to make doing this easier, so that there is less custom code that a user might need to write. Specifically, we will create an issue to allow:

  • calling the default zoom/unzoom with an offset position for the mouse on all graphs at the same time
  • the offset position may (and most likely) will involve percentages, in cases where the graphs are not the same size

Dear @Anaisdg , thank you for the information! I will wait for the implementation of such good feature in Giraffe, in the same time I will try to do something from side of my app.

In Grafana I can see the simultaneous Zoom for two charts, but it is implemented via additional GET query. Actually it is not Zoom, because it is not using already queried data.

Hi,
I am also interested in this feature.
If I can get the timestamps “begin” and “end” just after a zoom, it will be wonderful !