Chartjs-Thingsboard – Custom timeseries widget injected with Chart.js library

0👍

The required behaviour is achievable in Highcharts by using zones, but requires some customization if you want to apply the duration check.

Below is an example of adding zones dynamically, based on point value and trend time length.

  chart: {
    type: 'line',
    events: {
      load: function() {
        const zones = [];
        const sixMinutes = 1000 * 60 * 6;

        function updateTime(timeObj, color, timestamp) {
          // check time for other colors
          for (let key in timeObj) {
            if (key !== color && key !== 'passed' && timeObj[key]) {
              if (timeObj.passed > sixMinutes) {
                zones.push({
                  color: 'grey',
                  value: timeObj[key]
                }, {
                  value: timeObj[key] + timeObj.passed,
                  color: key
                });
              }
              timeObj[key] = 0;
              timeObj.passed = 0;
            }
          }
          // save current trend
          if (timeObj[color]) {
            timeObj.passed = timestamp - timeObj[color];
          } else {
            timeObj[color] = timestamp;
          }
        }

        this.series.forEach(s => {
          const time = {
            green: 0,
            orange: 0,
            red: 0,
            passed: 0
          };

          s.points.forEach(p => {
            if (p.y > 50 && p.y < 70) {
              updateTime(time, 'green', p.x);
            } else if (p.y > 70 && p.y < 90) {
              updateTime(time, 'orange', p.x);
            } else if (p.y > 90) {
              updateTime(time, 'red', p.x);
            } else {
              updateTime(time, null, p.x);
            }
          });

          s.update({
            zones
          });
        });
      }
    }
  }

Live demo: https://jsfiddle.net/BlackLabel/jt0p9a3d/

API Reference: https://api.highcharts.com/highcharts/series.line.zones

Docs: https://www.highcharts.com/docs/chart-concepts/series#zones

Leave a comment