Is it possible to change the background of this AJAX Animated HighChart to preserve sensor battery life?

[John_Betong]

I have managed to create an animated AJAX HighChart from the following demo:

https://www.highcharts.com/demo/live-data/

Problem lies with using a physical IOT LoRaWAN Sensor which is set to update temperature and humidity every minute… there is an enormous drain on the battery and not necessary because the temperature does not vary dramatically over a ten minute period.

The IOT Sensor can be set to sleep between sending data and subsequently dramatically improves battery life.

If possible, where should I start looking to modify the AJAX script to slightly toggle the background colour, say every 20 seconds to indicate activity but no temperature change. A message would also be quite nice

[labofoz]

Hi John, that’s a really awesome use case for Highcharts! The data config has a few callbacks you can tap into, and the one you’re most likely interested in is data.parsed. Here’s a fiddle, open your console to see the logs: https://jsfiddle.net/ouzv45wg/

Here’s an extract:

Highcharts.chart('container', {
    // ...
    data: {
      parsed (columns) {
        console.log(columns)
      }
    }
    // ...
});

I’d have to see how you’re current code looks like to suggest how to modify the background color every X seconds, but there are a few options there too. One option would be to immediately set the background color on the parsed callback and use setTimeout to change it back. Here’s a modified example to do something like that: https://jsfiddle.net/ouzv45wg/2/

Highcharts.chart('container', {
    // ...
    data: {
      parsed (columns) {
        console.log(columns)
        document.body.style.background = 'green'
        setTimeout(() => document.body.style.background = 'white', 250)
      }
    }
    // ...
});

Edit: Oh, just realized you might not always have data coming in. In that case, you can use setInterval instead outside of the parsed callback to just blink the color every so often. You would actually have to nest a setTimeout inside a setInterval:

setInterval(function () {
  // set to the "on" color
  setTimeout(function () {
    // set to the "off" color
  }, stayOnForYSeconds)
}, stayOffForXSeconds)

…or something like that, that’s tripping me up thinking about it lol