# Compute countdown timer value via Node-RED and then use in Grafana

**URL:** https://discourse.nodered.org/t/compute-countdown-timer-value-via-node-red-and-then-use-in-grafana/55769
**Category:** General
**Created:** [27 December 2021 21:00 UTC](https://discourse.nodered.org/t/compute-countdown-timer-value-via-node-red-and-then-use-in-grafana/55769 "2021-12-27T21:00:38Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![grant1](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/grant1/32/49890_2.png) [@grant1](https://discourse.nodered.org/u/grant1)
#### Post date: [27 December 2021 21:00 UTC](https://discourse.nodered.org/t/compute-countdown-timer-value-via-node-red-and-then-use-in-grafana/55769/1 "2021-12-27T21:00:38Z")

</div>

I currently have a simple [javascript countdown timer script](https://www.w3schools.com/howto/howto_js_countdown.asp) running in a Grafana Text panel:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/9/f9da252c9b72f7962236f8136668e1ba9c2dad7d.jpeg)

Here is what the Text panel looks like:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/f/ef08897cee8e8abccf96d2e7fee089b039c0d943.jpeg)

I realize using Node-RED dashboard would be a logical place to use a countdown timer (esp. since there are many excellent ones available), but in my case Grafana is widely used and in the interest of keeping everything on a single dashboard, I would like to try to use Grafana for this purpose.

I can use Node-RED to compute the `var countDownDate` since it's a simple calculation using some values that I already have in Node-RED, but once the math is done and I have a "future" date/time that I wish to count down to, could I use Node-RED to make that value "visible" on our local network, which the above Text panel could then reference / point to?

---

<div class="post-metadata">

### Author: ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)
#### Post date: [28 December 2021 06:11 UTC](https://discourse.nodered.org/t/compute-countdown-timer-value-via-node-red-and-then-use-in-grafana/55769/2 "2021-12-28T06:11:42Z")

</div>

To make a value available externally I make use of http-in + http-response nodes (this will create an http end-point, extemely useful to create api's), not sure if the following completely fits your request, but you can apply the gist of it.

 ![Screenshot 2021-12-28 at 07.07.36](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/c/bc3618dccb7ffb8452fc27af9c120205039b6e89.jpeg)

Then you can open the `http://<node-red-ip>:1880/countdown` in a browser and the countdown date will be displayed (first click the inject node to set the flow variable).

In the grafana panel javascript use the fetch api to retrieve the same page.

```auto
<script>
fetch('http://<node-red-ip>:1880/countdown')
  .then((response) => response.text()
  .then(countdown))

function countdown(input) { 
	var countDownDate = new Date(input).getTime()
	var x = setInterval(()=>{ ... })
}
</script>

```

Example flow:

```auto
[{"id":"1349549af1259dbe","type":"http in","z":"d1354c2d336c9ebc","name":"","url":"/countdown","method":"get","upload":false,"swaggerDoc":"","x":350,"y":200,"wires":[["9b6390b07e6d525a"]]},{"id":"132b0428e9d2e51e","type":"http response","z":"d1354c2d336c9ebc","name":"","statusCode":"","headers":{},"x":710,"y":200,"wires":[]},{"id":"c0e9e9c8d46e2f59","type":"inject","z":"d1354c2d336c9ebc","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":420,"y":280,"wires":[["a3c2bd895b4eb2db"]]},{"id":"a3c2bd895b4eb2db","type":"change","z":"d1354c2d336c9ebc","name":"","rules":[{"t":"set","p":"countdown","pt":"flow","to":"","tot":"date"}],"action":"","property":"","from":"","to":"","reg":false,"x":600,"y":280,"wires":[[]]},{"id":"9b6390b07e6d525a","type":"function","z":"d1354c2d336c9ebc","name":"","func":"msg.payload = new Date(flow.get(\"countdown\")).toISOString()\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":550,"y":200,"wires":[["132b0428e9d2e51e"]]}]

```

---

<div class="post-metadata">

### Author: ![grant1](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/grant1/32/49890_2.png) [@grant1](https://discourse.nodered.org/u/grant1)
#### Post date: [28 December 2021 15:14 UTC](https://discourse.nodered.org/t/compute-countdown-timer-value-via-node-red-and-then-use-in-grafana/55769/3 "2021-12-28T15:14:59Z")

</div>

Thank you. I think I have it almost working using the flow you provided. I see this in the browser after injecting the timestamp:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/2/32972a58a3713d7c4f1fd5f3379d2f8131c4c22f.png)

In Grafana, I pasted this (the first part coming from you, the second part from the W3 schools example):

```auto
<script>
fetch('http://192.168.10.25:1880/countdown')
  .then((response) => response.text()
  .then(countdown))

function countdown(input) { 
	var countDownDate = new Date(input).getTime()
// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Display the result in the element with id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";

  // If the count down is finished, write some text
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);
</script>

```

Nothing appears in Grafana, but also no error messages. I believe I am missing something obvious?

---

<div class="post-metadata">

### Author: ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)
#### Post date: [28 December 2021 16:39 UTC](https://discourse.nodered.org/t/compute-countdown-timer-value-via-node-red-and-then-use-in-grafana/55769/4 "2021-12-28T16:39:44Z")

</div>

> [@grant1](#):
>
> ` var distance = countDownDate - now;`

Is the outcome of this calculation \<0 ?

---

<div class="post-metadata">

### Author: ![grant1](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/grant1/32/49890_2.png) [@grant1](https://discourse.nodered.org/u/grant1)
#### Post date: [28 December 2021 16:50 UTC](https://discourse.nodered.org/t/compute-countdown-timer-value-via-node-red-and-then-use-in-grafana/55769/5 "2021-12-28T16:50:37Z")

</div>

Correct, that value is \< 0 (and it's embarrassing to miss that).

But even changing the javascript code to:

```auto
  var distance = (countDownDate + 10000) - now;

```

still does not make anything appear in Grafana.

---

<div class="post-metadata">

### Author: ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)
#### Post date: [28 December 2021 17:55 UTC](https://discourse.nodered.org/t/compute-countdown-timer-value-via-node-red-and-then-use-in-grafana/55769/6 "2021-12-28T17:55:07Z")

</div>

Did you update the flow variable ? 10000 is nothing in millis

---

<div class="post-metadata">

### Author: ![grant1](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/grant1/32/49890_2.png) [@grant1](https://discourse.nodered.org/u/grant1)
#### Post date: [28 December 2021 19:10 UTC](https://discourse.nodered.org/t/compute-countdown-timer-value-via-node-red-and-then-use-in-grafana/55769/7 "2021-12-28T19:10:03Z")

</div>

Yes, I injected the flow again in Node-RED and confirmed the updated value is displayed at [http://192.168.10.25:1880/countdown](http://192.168.10.25:1880/countdown)

But even after expanding the +value from 10000 to 10000000000, I still cannot get anything to appear in the Grafana text panel. I think there must be an error in my javascript code above.

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [26 February 2022 19:10 UTC](https://discourse.nodered.org/t/compute-countdown-timer-value-via-node-red-and-then-use-in-grafana/55769/8 "2022-02-26T19:10:20Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.