How to create graph with some buttons to change time range

Hello all, I am trying to somewhat recreate a graph in grafana I had in my old dashboard with Domoticz/Dashticz. (see screenshot below)
I especially want to implement the buttons at the top to select the time range between day, week,month, year.

I had hoped adding these buttons would be easy, but sofar I am scratching my head on how to do this. Does anyone have a suggestion /tip, on how to implement this?

Regards,

Bert

hello, grafana has its timepicker on the upper right of your screen , you just need to add this macro variable ( $__timeFilter( ) )in your query to make the panel dynamically change according to your timepicker.

timepicker:
image

macro-variable: iā€™m using postgreSQL query to build my graph and my datetime variable is ā€œdateā€
image

Edit: because iā€™m using postgres datasource so i could use the macro $_timeFilter()
If youā€™re using another datasource, i recommend you to read the doc of grafana to know which macros you should use in your case:
Data sources | Grafana documentation

Welcome @brjhaverkamp

Does something like this work for you?

Hello, Thanks for your reply. I have the AND $timeFilter already in. and the timepicker is working.
Iā€™m using influxdb, so I guess that makes the syntax slightly different form your postgreSQL.

My issue is now that I dont want to use the normal timepicker. It is clumpsy to go through a pulldown menu on a small 8 inch screen. I liked the preset time picker values and I basically only need 4 time ranges: Last day, Last week, Last month and Last year.

Or am I missing your point. (Iā€™m a newbee in grafana) is the date variable the point?
In that case I need some more explanation, Iā€™m sorry.

Regards,
Bert

Hi Grant,

That looks exactly what I am pursuing! Nice You created this in Node-Red, right?
For me that looks like a bit convoluted. Using Home-Assistant+Grafana+Nodered to make a single graph:-) My top level dashboard is in home assistant.

But maybe I can do the same thing directly from HA. I already played with the URL parameters. That works.

I was hoping however to do it cleanly within grafana however by changing $__from and $__to from a button on the grafana dashboard. It feels like the only puzzle piece I am missing is how to change those variables on a button press.

Regards,

Bert

Just create links/datalinks, which will use all current parameters and their values, but configure to and from parameter values based on your needs (thatā€™s exactly what time picker is doing - it modifies from/to parameters - watch dashboard url parameters, so just mimic that with links).

2 Likes

Hi again, if you wanna have only these 4 time range, i think you could try the method of using customize enviromental variable: you can find it in the setting of your dashboard

Thanks all, I went with the panel links. I created 4 links, each with a different ā€œfromā€ value in the URL. With panel links there is a drop down at the top of the panel to choose between the options.
It would have been great if those options could have been side by side as buttons or clickable tags. But this will have to do for now. (Unless you have a good suggestion for that as well!)

Kind regards,

Bert

If youā€™re using links, you can try to insert thoses 4 links in a HTML navigation bar, you can write your html with the plugin Text of Grafana and gonna have something like this:
image

1 Like

That is a pretty good idea! Thanks!! Iā€™m going to try that out!