Multicolor line with Dashboard Chart

Example flow how to create line chart with one line having two colors depending on value being over or under the threshold.

Actually there will be two lines but depending on value the lines have gaps if value is not at the correct side of threshold. Tricky part is to connect those lines visually correctly. It takes some tweaking so the graphical representation of data is not absolutely correct but at the point where threshold line is crossed it will have a slight time delay.

image text

[{"id":"85de7d2a.d10f5","type":"ui_slider","z":"d65d7a10.498788","name":"","label":"slider","tooltip":"","group":"a4448716.200ac8","order":2,"width":0,"height":0,"passthru":true,"outs":"all","topic":"","min":"-5","max":10,"step":"0.1","x":260,"y":500,"wires":[["d58bdaf1.d93048"]]},{"id":"d58bdaf1.d93048","type":"function","z":"d65d7a10.498788","name":"prepare","func":"var last = context.get('last') || 'under'\nvar threshold = 0\nvar undermessage = {topic:'under',payload:null}\nvar overmessage = {topic:'over',payload:null}\nvar unsentmessage = null\n\nif(msg.payload > threshold){\n    if(last == 'under'){\n        undermessage.payload = threshold\n        overmessage.payload = threshold\n        unsentmessage = msg\n    }\n    else{\n        overmessage.payload = msg.payload\n    }\n    last = 'over'\n}\nelse{\n    if(last == 'over'){\n        overmessage.payload = threshold\n        undermessage.payload = threshold\n        unsentmessage = msg\n    }\n    else{\n        undermessage.payload = msg.payload\n    }\n    last = 'under'\n}\ncontext.set('last',last)\n\nreturn [[overmessage,undermessage],unsentmessage]","outputs":2,"noerr":0,"x":430,"y":500,"wires":[["277cf5b5.1c633a"],["3679a19c.ac113e"]]},{"id":"277cf5b5.1c633a","type":"ui_chart","z":"d65d7a10.498788","name":"","group":"a4448716.200ac8","order":2,"width":0,"height":0,"label":"chart","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"-5","ymax":"10","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"60","cutout":0,"useOneColor":false,"colors":["#1f77b4","#ff0000","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":600,"y":500,"wires":[[]]},{"id":"125535f9.c93eca","type":"inject","z":"d65d7a10.498788","name":"Clear chart","topic":"","payload":"[]","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":460,"y":440,"wires":[["277cf5b5.1c633a"]]},{"id":"3679a19c.ac113e","type":"delay","z":"d65d7a10.498788","name":"","pauseType":"delay","timeout":"20","timeoutUnits":"milliseconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":440,"y":580,"wires":[["d58bdaf1.d93048"]]},{"id":"a4448716.200ac8","type":"ui_group","z":"","name":"LEVEL","tab":"6e01408.cda5dc","order":1,"disp":true,"width":"8","collapse":false},{"id":"6e01408.cda5dc","type":"ui_tab","z":"","name":"Home","icon":"track_changes","order":1,"disabled":false,"hidden":false}]
hotNipi

Flow Info

created 4 days ago

Node Types

Core
  • delay (x1)
  • function (x1)
  • inject (x1)
Other
  • ui_chart (x1)
  • ui_group (x1)
  • ui_slider (x1)
  • ui_tab (x1)

Tags

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