Dashboard chart - change line colour dependent on value

This flow shows a technique that can be used to change a line colour dependent on the value being charted. For example to change the line colour when a threshold value is exceeded. It works by drawing two lines (which will have different colours) and stopping one line when the other is started. The effect is that of changing the line colour.

[{"id":"9e863e1e.6e8ce8","type":"function","z":"514a90a5.c7bae8","name":"Sin","func":"msg.payload = Math.sin(msg.payload/4000)\nreturn msg;","outputs":1,"noerr":0,"x":306.5,"y":159,"wires":[["4151227a.e0dd7c"]]},{"id":"b1d4bffb.22aab8","type":"inject","z":"514a90a5.c7bae8","name":"0.5 sec timestamp","topic":"","payload":"","payloadType":"date","repeat":"0.5","crontab":"","once":false,"onceDelay":0.1,"x":128.5,"y":159,"wires":[["9e863e1e.6e8ce8"]]},{"id":"a76560d8.af7618","type":"ui_chart","z":"514a90a5.c7bae8","name":"","group":"39b33e51.922692","order":0,"width":0,"height":0,"label":"chart","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"60","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"x":603.5,"y":159,"wires":[[],[]]},{"id":"4151227a.e0dd7c","type":"function","z":"514a90a5.c7bae8","name":"Set Topics","func":"let threshold = 0.5\nlet lowTopic = \"low\"\nlet highTopic = \"high\"\nlet thisTopic;\nlet totherTopic\nif (msg.payload > threshold) {\n    thisTopic = highTopic\n    totherTopic = lowTopic\n} else {\n    thisTopic = lowTopic\n    totherTopic = highTopic\n}\nlet lastTopic = context.get('last') || thisTopic\nlet msg2 = null\nif (thisTopic != lastTopic) {\n    // just crossed the threshold, send to both lines\n    msg.topic = lastTopic\n    msg2 = {payload: msg.payload, topic: thisTopic}\n} else {\n    msg.topic = thisTopic\n    msg2 = {payload: null, topic: totherTopic} // leave payload null to stop the line\n}\ncontext.set('last', thisTopic)\nreturn [[msg, msg2]];","outputs":1,"noerr":0,"x":453,"y":159,"wires":[["a76560d8.af7618"]]},{"id":"39b33e51.922692","type":"ui_group","z":"","name":"Default","tab":"55546119.d20b2","disp":true,"width":"6","collapse":false},{"id":"55546119.d20b2","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
colinl

Flow Info

created 2 months ago

Node Types

Core
  • function (x2)
  • inject (x1)
Other
  • ui_chart (x1)
  • ui_group (x1)
  • ui_tab (x1)

Tags

  • dashboard
  • chart
  • line
  • colour
Copy this flow JSON to your clipboard and then import into Node-RED using the Import From > Clipboard (Ctrl-I) menu option