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

InfluxDB 2 Dashboards
1

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.

1 Like
2

@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
1 Like
3

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.

4

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 !

5

Hi my friends,
Same here, in need to find a way to achieve this :slight_smile: :blush: :smiling_face:
I haven’ t started yet on looking for a “home made” way to do it, but was thinking of deriving the zoom click event of a single graph, to have it bubble up up to the main container for all graphs, and from there treat the event values ( hopefully start and stop timestamps…) as params to trigger all graphs queries update,
non trivial stuff indeed, particularly because tweaking a built-in click event from a svg element generated by a librairy is pretty tricky !

6

Hey @jeleb , did you ever manage to find a way to do this ?

7

No, I didn’t use this :cry:

8

ah shame ! Thank you anyway for your reply :smiley: