Bar Graph Colors determined by values

Dashboard
1

Loving the dashboard, many thanks for the work gone into making it.

With regards to bar graphs, would it be possible to control the color of the bar with the value being passed into it, in a similar way to the min, seg1, seg2, and max variables work with the gauge graph?

For example I'm using the dashboard bar graphs to monitor battery levels and it would be great to color the bar green for good, amber for low, and red for depleted.

If this can already be achieved via code I'd love to know how.

Thanks again.

Graham

2

No easy way - though there was a discussion fairly recently on how to use a template to achieve it.
I think it may have been this one Battery gauge load msg.payload into javascript [Resolved]

3

Also see this post Led icon changed

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