Automatically Zoom to data in a Time series Panel

Dear Grafana folks

Here is a dashboard with the option to select certain subjects.
https://humanalyse.com/d/LYmWQbPVz/selected-cases?orgId=207&from=1654936200203&to=1654950449022

When you select a new subject who has data in another data range, then you need to press the button “Zoom to data”.
Is there a way to Zoom automagically to the data?

I checked some links to similar questions but found nothing that looked directly useful.

Many thanks and also thanks to the devs.
Warm wishes
Eric

PS. Sometimes the “Zoom to Data” button leaves out the last data point. This is most often evident on the smooth interpolations.

@allomorphy I can think of using JavaScript Code to determine if any data returned and, if not, automagically use locationService to update Time Range.

Documentation:

Thank you Mikhail!
Great to learn.

1 Like

I have a similar issue and may require the same solution.

I have the need to compare 2 or more set of metrics from random time intervals. The comparisons represent the same metric. Below is a screen shot of a Dashboard with a repeating panel that display the time-series graphs based on the user choice of some drop-down variable lists. The variables chosen determines the time range for the graph.

The problem that occurs is that the default time range for the dashboard cannot completely display the contents of BOTH graphs at the same time. One graph always has the ZOOM TO DATA button shown. When you click on this button that graph correctly display the graph. The goal of my prototype is to have both graphs displaying data for visual comparison. That is to avoid clicking the ZOOM TO DATA.

I understand that there is a feature in the following panel section to adjust the time-interval per panel. However, that is not really a dynamic setting. Ideally, it would be possible to get a start and end time-interval value from a database query and set it for the panel. Is that possible? The other option is to change my data to have the same time range (but the correct metric value for that adjusted time). That work around is a bit misleading to the end-user and not ideal.

image


In my situation where I can have up to the max allowed panels in a repeating scenario, would the Plug-in approach recommended in this thread work for me. If so, is there any examples of this approach.

Before I jump into learning about Plug-ins I would prefer to know that I am going the correct way to a solution.

mcooray

This is similar to something that we have faced for years. One of the challenges that was unbreakable for us is that by design the entire dashboard is constrained to the time period as set in the Time Picker and defined in $TimeInterval.

Last time we ended up rewriting certain series into the time periods of other series. But that is too ugly.

I like the approach to fire up a function that calls locationService. My idea is to fire this up on each reload or lookup.

It’s not easy to find a nice implementation of the locationService which makes me wonder if anyone has used it for Zoom to Data. Would be nice to not have to figure this out.

Thanks for anyone who can point to a working example :innocent:

Warm wishes
Eric

1 Like

I solved this by using the Grafana Apache eCharts Plug-in. Not only is it better looking and fancier than the Grafana charts it also has the built-in ability to set time period for each panel in a horizontal repeating setup.

That is I use a repeating panel with an eChart and a query that dynamically gets a different set of metrics for each repeated panel.

1 Like

@mcooray Glad Apache ECharts worked for you! Do you have any screenshots to share?

I have to limit the data I show here but you can see that in this repeating panel the 2 charts have a different X-axis (time-series). The metrics are from 2 different days.