Provide a date value and use it as offset

Hey there, is there a way to provide a date in a dashboard and use it as an offset value?
I need it to create comparative graphs between the time picker value and my other time value.
I am using Grafana 8.5.15 and metrics are stored into Prometheus.


would it be used by the user of graphana? Does it default to today or modifiable by user or canned one

Hi, yes only the grafana user will access the Dashboard. Furthermore, we can set today but also other date. For example, i would need to compare today morning with with 3 days ago morning.

1 Like

here is one way using variables with free hand entry

another one using microsoft sql server. you get the idea


I cannot use ms sql. I am not understanding the first screenshot. Offset could be 100h or 60m or similar . It cannot be a date, am i wrong?

So this other value is a date or some numeric value such as hour or minute?

The first one is just a text field to enter your offset value

Yes, it is a complete date with the date format of time picker date. Of course if i have to compare 2023-04-28 12:00:00 with 2023-04-24 12:00:00 it is easy to calculate the time difference and the offset while to be calculated against 2023-04-24 18:37:20 it is more complex. I don’t want to use external website or similar. I need to write a date, calculate the difference with my time picker and transform it for the offset

1 Like

I assume these graphs would be side by side?

I think the first option, my custom date, is the best option as I do not know of a calendar widget that grafana provides for you to use as a secondary time picker

You may try to create a time picker using the Data Manipulation panel. You can use the custom JavaScript to calculate the difference and set the dashboard variable using the locationService instead of API requests:

1 Like

@mikhailvolkov it seems interesting. Can you give any reference about locationService? I searched info but I didn’t find anything. With locationService can I bypass the API server requirement?

You can use Custom Requests and execute the JavaScript Code without interacting with the API server.

We have an example of how to use the locationService in the documentation.

Sorry but I cannot really understand anything about this kind of usage.
Inside my dashboard there is a Text box variable (i.e. tmpVariable) . I added a Data manipulation panel with an element of Date and Time type.
Should I use the update request section, right? So, how can I modify my tmpVariable?
To avoid the usage of API server I must not select any API method, right?
Should that example code be something like:

if (response && response.ok) {
  response.json().then((resp) => {
    locationService.partial({ "var-tmpVariable": resp["name"] }, true);
}  else {
  notifyError(['Update', 'error occured updating values.']);

Doing that I am facing continuosly the else error

just an update:
I am trying this code => {
  locationService.partial({ "var-tmpVariable": element.value }, true);

In this way, when I click on Submit button I can update the value of tmpVariable.
Probably it is not the best way to do that, but I think is a good starting point. Now I have to understand how to get in my Custom code the value of the Grafana default time picker using $__from variable

1 Like

That’s the correct approach. You don’t need to call onOptionsChange if you don’t need to save the panel options. I would also use the as a variable name. => {
  locationService.partial({ `var-${}`: element.value }, true);

Dashboard and Global variables will be automatically replaced in the JavaScript Code

I think with a recent version of grafana you could use transformations to convert time column to int, then add the time offset in ms, and then convert back the new times to time again.
of course, you will need to convert your time value variable offset to int but, its easy.