Bar Graph Colors determined by values

Dashboard
4

Also see this post Method to interact bewteen node-red/JS/HTML/CSS ui_template

Below example flow uses this code to achieve what you want. You can modify it to add how many color segments you want as well as the associated colors.

let pay = msg.payload;
let col = "lime";

switch (true) {
    case (pay >70):
        col = "lime";
        break;
    case (pay >50):
        col = "orange";
        break; 
    case (pay >0):
        col = "red";
        break;
}

msg.color = col;
return msg;

[{"id":"e0816f8b.d98e6","type":"tab","label":"SOC - 3 - Simplified - without scope.$watch","disabled":false,"info":""},{"id":"a7d3387d.fa7518","type":"ui_template","z":"e0816f8b.d98e6","group":"9145e585.5ef2e8","name":"Batt_NEW","order":0,"width":0,"height":0,"format":"<!DOCTYPE html>\n<html>\n<head>\n\n<style>\n\n/*Initial Code By Mickael Novotny*/\n\n:root {\n --batt_lev: {{msg.payload}}%;\n --batt_col: {{msg.color}};\n}\n\nbody {\n padding: 25px 50px;\n}\n\n.battery {\n/* Battery outerwall*/\n border: 5px solid #333;\n width: 278px;\n height: 108px;\n padding: 4px;\n border-radius: 2px;\n position: relative;\n margin: 15px 0;\n} \n\n\n.battery::before {\n/* Battery Pole */\n content: '';\n height: 90px;\n width: 16px;\n background: #333;\n display: block;\n position: absolute;\n top: 7.5px;\n right: -16px;\n border-radius: 0 4px 4px 0;\n}\n\n.battery::after {\n/* Battery inner margins*/\n content: '';\n display: block;\n position: absolute;\n top: -3px;\n left: -3px;\n right: -3px;\n bottom: -3px;\n border: 6px solid #fff;\n border-radius: 2px;\n}\n\n-->\n\n.battery-level {\n/* battery level*/\n background: var(--batt_col, blue); \n position: absolute;\n top: 0px;\n bottom: 0px;\n width: var(--batt_lev, 50%);\n left: 0%;\n}\n\n.battery-text{\n z-index:99;\n position: absolute;\n font-size:32px;\n top: 20px;\n left:120px;\n color:'';\n}\n\n.warn {\n background-color: #efaf13;\n}\n \n.alert {\n background-color: #e81309;\n} \n\n.alert::after {\n background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cg%3E%3C%2Fg%3E%20%3Cpath%20fill%3D%22%23e81309%22%20d%3D%22M17.927%2012l2.68-10.28c0.040-0.126%200.060-0.261%200.060-0.4%200-0.726-0.587-1.32-1.314-1.32-0.413%200-0.78%200.187-1.019%200.487l-13.38%2017.353c-0.18%200.227-0.287%200.513-0.287%200.827%200%200.733%200.6%201.333%201.333%201.333h8.073l-2.68%2010.28c-0.041%200.127-0.060%200.261-0.060%200.4%200.001%200.727%200.587%201.32%201.314%201.32%200.413%200%200.78-0.186%201.020-0.487l13.379-17.353c0.181-0.227%200.287-0.513%200.287-0.827%200-0.733-0.6-1.333-1.333-1.333h-8.073z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E'); \n background-repeat: no-repeat;\n background-size: 18px;\n height: 18px;\n width: 18px;\n margin: 6px 0 0 8px;\n content: '';\n display: inline-block;\n position: absolute;\n}\n\n</style>\n</head>\n\n<body>\n\n<div class=\"battery\">\n <div class=\"battery-level\"></div>\n <div class=\"battery-text\"><p><span id=\"myMsg\">{{msg.payload}}</span>%</p></div>\n</div>\n\n</body>\n\n</html>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":650,"y":180,"wires":[[]]},{"id":"4f78d16a.b9de9","type":"inject","z":"e0816f8b.d98e6","name":"Trigger","topic":"","payload":"","payloadType":"date","repeat":"0.9","crontab":"","once":true,"onceDelay":0.1,"x":140,"y":180,"wires":[["1e94b315.e8ea7d"]]},{"id":"1e94b315.e8ea7d","type":"change","z":"e0816f8b.d98e6","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload%100","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":300,"y":180,"wires":[["7d5ca2fe.e0561c"]]},{"id":"3da31f26.c9d51","type":"comment","z":"e0816f8b.d98e6","name":"Modified: removed scope.$watch","info":"","x":170,"y":120,"wires":[]},{"id":"7d5ca2fe.e0561c","type":"function","z":"e0816f8b.d98e6","name":"Set color","func":"let pay = msg.payload;\nlet col = \"lime\";\n\nswitch (true) {\n    case (pay >70):\n        col = \"lime\";\n        break;\n    case (pay >50):\n        col = \"orange\";\n        break; \n    case (pay >0):\n        col = \"red\";\n        break;\n}\n\nmsg.color = col;\nreturn msg;","outputs":1,"noerr":0,"x":480,"y":180,"wires":[["a7d3387d.fa7518"]]},{"id":"9145e585.5ef2e8","type":"ui_group","z":"","name":"Car Data","tab":"a2516971.840328","order":3,"disp":true,"width":"12","collapse":false},{"id":"a2516971.840328","type":"ui_tab","z":"","name":"Home","icon":"dashboard"}]

EDIT: in order to work properly this flow should be configured with Theme = Light and configured to use "Angular theme in ui_template"

r-01

1 Like