Time navigation buttons

Grafana Dashboards
1

Hello,

I am trying to recreate the energy consumption bar chart from Home Assistant and I am particularly interested in the time selection / navigation bar in the upper right corner.

Image 025
Image 0252248×509 33.4 KB

Having these quick selection buttons is much more comfortable than the default time selector in Grafana.
What makes it even more complicated is that I want to have these buttons per chart and not per dashboard.

Any ideas?

2

hi @massaquah :wave:

This post may find more constructive feedback from the community in our Github discussions’ page. :slightly_smiling_face:

1 Like
3

I had the same problem and built a couple of buttons using javascript.

I did this on version 9.5, but using the text visualization create a couple buttons and script to modify the url, in my case I wanted it to change by the day.

Here’s what I did:
Modify the grafana config file for scripts to be ran under:
disable_sanitize_html = true
and restart.

Then using the text button put this code in, modifying it to your own website and times.


<button onclick="incrementValue()">Go Back</button>
<button onclick="decreaseValue()">Go Forward</button>

<script>
  function incrementValue()
  {
    var value_to_add;
    var regex_1 = /(?:https:\/\/yourwebsite\/d\/)\w{8}-\w{4}\-\w{4}\-\w{4}\-\w{12}\/\S*\?(?:orgId=)\S{2}(?:from=now-)/;
    var regex_2 = /(?:https:\/\/yourwebsite\/d\/)\w{8}-\w{4}\-\w{4}\-\w{4}\-\w{12}\/\S*\?(?:orgId=)\S{2}(?:from=now-)\S*(?:to=now-)/;
    var regex_3 = /(?:https:\/\/yourwebsite\/d\/)\w{8}-\w{4}\-\w{4}\-\w{4}\-\w{12}\/\S*\?(?:orgId=)/;
    var url = String(window.location.href);
    var url_split = url.match(regex_3);
    

    var location_1 = regex_1.exec(url);
    var location_2 = regex_2.exec(url);

    if(location_1 != null)
    {
    //get and change the number
      value_to_add = Number(url.at(location_1[0].length))+1;
    }
    else
    {
      value_to_add = 1;
    }
    new_url = url_split[0] + "&from=now-" + value_to_add +"d%2Fd&to=now-"+value_to_add +"d%2Fd";
    window.location.href = new_url;
  }

  function decreaseValue()
  {
    var value_to_add;
    var regex_1 = /(?:https:\/\/yourwebsite\/d\/)\w{8}-\w{4}\-\w{4}\-\w{4}\-\w{12}\/\S*\?(?:orgId=)\S{2}(?:from=now-)/;
    var regex_2 = /(?:https:\/\/yourwebsite\/d\/)\w{8}-\w{4}\-\w{4}\-\w{4}\-\w{12}\/\S*\?(?:orgId=)\S{2}(?:from=now-)\S*(?:to=now-)/;
    var regex_3 = /(?:https:\/\/yourwebsite\/d\/)\w{8}-\w{4}\-\w{4}\-\w{4}\-\w{12}\/\S*\?(?:orgId=)/;
    var url = String(window.location.href);
    var url_split = url.match(regex_3);
    

    var location_1 = regex_1.exec(url);
    var location_2 = regex_2.exec(url);

    if(location_1 != null)
    {
    //get and change the number
      value_to_add = Number(url.at(location_1[0].length))-1;
    }
    else
    {
      value_to_add = 0;
    }
    if(value_to_add == 0)
    {
       new_url = url_split[0] + "&from=now%2Fd&to=now%2Fd";
    }
    else
    {
      new_url = url_split[0] + "&from=now-" + value_to_add +"d%2Fd&to=now-"+value_to_add +"d%2Fd";
    }
    window.location.href = new_url;
  }

</script>