Multicolor line with Dashboard Chart

README.md

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.

flow.json

[{"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}]

Hello,

may be an improvment with more than two colors for predefined ColorChangeValues. E.g. Outside temperatures. Using node.send ( ) for color-change points.

see:
const limitMaxArr = [-16,-10,0,10,20,30,36,40,100]
const limitColorArr = ["#A40289","#000B92","#0EFFFC","#078D07","#2EF307","#FAA20E","#F70B17","#C10004","#F404CD" ]
// https://content.meteoblue.com/de/spezifikationen/wetter-variablen/temperatur

// find max idx with (value lower than )
function getIdx ( wert) {
for (i = 0; i < limitMaxArr.length; i++) {
if (wert < limitMaxArr[i]) {
return i
}
}
}

function initArr () {
var msgArr = [];
for (i = 0; i < limitMaxArr.length; i++) {
msgArr.push( { topic : limitColorArr[i] + ' < '+limitMaxArr[i],
payload : null,
ui_control : { colors : limitColorArr }
} );
}
return msgArr
}

var msgArr = initArr()

var idx = getIdx(msg.payload);
var last_payload = context.get('payload')||msg.payload;
var last_idx = getIdx( last_payload )||0;
if (last_idx != idx) {
var msgArr4change = initArr();
if (last_idx < idx) { // increase
msgArr4change[last_idx].payload = limitMaxArr[last_idx];
msgArr4change[idx].payload = limitMaxArr[last_idx];
} else { // decrease
msgArr4change[last_idx].payload = limitMaxArr[last_idx-1];
msgArr4change[idx].payload = limitMaxArr[last_idx-1];
}
node.send([msgArr4change,null]);
} // colorChange

msgArr[idx].payload=msg.payload;
context.set('payload',msg.payload)

return [msgArr];