CODEWITHSUNDEEP
grafana
nik_kobe
nik_kobe

Reputation: 35

Present Time Range in Grafana's Text Panel

Is there a way to show timeRange.from and timeRange.to in Grafana's Text panel or may be in an another panel? I tried text-panels with markdown mode:

# Time From: $__interval

with different variables but no one did work. Neither did it if I defined a variable in Settings. The interval or timestamp is not showing.

I'm currently working on an HTML solution, but wondering if there is a simplier/proper way to present the time ranges?

Upvotes: 0

Views: 3567

Answers (1)

nik_kobe
nik_kobe

Reputation: 35

My HTML-solution, in case somebody faces the same issue

(got the main part from maxreb's solution from: https://github.com/grafana/grafana/issues/1909) :

<script type="text/javascript">
  refreshTimeFrom();
  refreshTimeTo();
  angular.element('grafana-app').injector().get('timeSrv').$rootScope.$on('refresh', function(event, data) { refreshTimeFrom(); });


  function refreshTimeFrom( )
  {
    var days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
    var ts = new Date(angular.element('grafana-app').injector().get('timeSrv').timeRange().from);
    document.getElementById("timeFrom").innerHTML = days[ts.getUTCDay() ] + " " 
                                                  + ts.getUTCDate() + "." + (ts.getUTCMonth()+1) + "." 
                                                  + ts.getUTCFullYear() + " " + ts.getUTCHours() + ":" 
                                                  + ts.getUTCMinutes() + ":" + ts.getUTCSeconds();
  }

  function refreshTimeTo( )
  {
    var days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
    var ts = new Date(angular.element('grafana-app').injector().get('timeSrv').timeRange().to);
    document.getElementById("timeTo").innerHTML = days[ts.getUTCDay() ] + " " 
                                                  + ts.getUTCDate() + "." + (ts.getUTCMonth()+1) + "." 
                                                  + ts.getUTCFullYear() + " " + ts.getUTCHours() + ":" 
                                                  + ts.getUTCMinutes() + ":" + ts.getUTCSeconds();
  }  
</script>

<font size = "3"><b> From:</b>  <span id="timeFrom" /></br></font>
<font size = "3"><b> To: </b> <span id="timeTo" /> </font>

Upvotes: 1

Related Questions