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:
macro-variable: iām using postgreSQL query to build my graph and my datetime variable is ādateā
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).
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:
That is a pretty good idea! Thanks!! Iām going to try that out!
Recommendations:
Summary and Recap of this Thread
Bert (@brjhaverkamp) wanted to recreate a dashboard feature, specifically buttons to select time ranges like day, week, month, and year. @tpham179 suggested using Grafanaās time picker macros and customizing environmental variables, while @jangaraj recommended using links or data links to mimic the time picker functionality. You can opt for panel links with different URL parameters for each time range, and @tpham179 further suggested using the Text panel plugin to create a custom HTML navigation bar for a more intuitive button layout
Related References
