Hi,
I read many post on this topic but the examples are for needs very complex while mine is very simple (not for me of course)
I have this chart (seven bar - one for each day of week)
and every night I send to it the max value of the temperature of the day; I'd like if the value is > 30 have the bar (all the bar) color "red", otherwise the bar color "green".
Can you help me?
NR 3.0.1
Even if your need seems to be very simple - it is not something the chart node provides or what you can override with chart options. You even need to create chart using the ui_template node - this way you have full control over the dataset property where you can reach colors for each bar. Or you can of course use some different charting library where such functionality is supported with easier access.
Ah, ok ....
I saw your example in this post ...
and I'm trying to modify the code ...
Thank you .....
Just for fun - bar chart (if for dedicated usage) is so simple stuff so you can easily create your own.
[
{
"id": "1763d9f4b9f4e8dd",
"type": "ui_chart",
"z": "98fb9802851faeed",
"name": "",
"group": "20ae1040.3cf58",
"order": 7,
"width": 0,
"height": 0,
"label": "chart",
"chartType": "horizontalBar",
"legend": "false",
"xformat": "HH:mm:ss",
"interpolate": "linear",
"nodata": "",
"dot": false,
"ymin": "0",
"ymax": "40",
"removeOlder": 1,
"removeOlderPoints": "",
"removeOlderUnit": "3600",
"cutout": 0,
"useOneColor": false,
"useUTC": false,
"colors": [
"#1f77b4",
"#aec7e8",
"#ff7f0e",
"#2ca02c",
"#98df8a",
"#d62728",
"#ff9896",
"#9467bd",
"#c5b0d5"
],
"outputs": 1,
"useDifferentColor": false,
"className": "",
"x": 580,
"y": 1220,
"wires": [
[]
]
},
{
"id": "d6ae1627865b4045",
"type": "inject",
"z": "98fb9802851faeed",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": ".5",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "",
"payloadType": "date",
"x": 160,
"y": 1260,
"wires": [
[
"41e865cd6b3afc23"
]
]
},
{
"id": "41e865cd6b3afc23",
"type": "function",
"z": "98fb9802851faeed",
"name": "random data between 0-40 ",
"func": "let labels = ['Mo','Tu','We', 'Th','Fr','Sa','Su']\nlet index = context.get('index') || 0\nindex++\nif(index > 6){\n index = 0\n}\ncontext.set('index',index)\n\n\nmsg.topic = labels[index]\nmsg.payload = parseFloat((Math.random()*40).toFixed(2))\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 370,
"y": 1260,
"wires": [
[
"1763d9f4b9f4e8dd",
"818be358773aa28b"
]
]
},
{
"id": "818be358773aa28b",
"type": "ui_template",
"z": "98fb9802851faeed",
"group": "20ae1040.3cf58",
"name": "chart without any charting library",
"order": 8,
"width": "6",
"height": "3",
"format": "<div class=\"chart-wrapper\">\n <div class=\"chart-row\">\n <div class=\"row-label\">MO</div>\n <div class=\"row-bar-container\">\n <div class=\"row-bar\" id=\"MO\"></div>\n </div>\n </div>\n <div class=\"chart-row\">\n <div class=\"row-label\">TU</div>\n <div class=\"row-bar-container\">\n <div class=\"row-bar\" id=\"TU\"></div>\n </div>\n </div>\n <div class=\"chart-row\">\n <div class=\"row-label\">WE</div>\n <div class=\"row-bar-container\">\n <div class=\"row-bar\" id=\"WE\"></div>\n </div>\n </div>\n <div class=\"chart-row\">\n <div class=\"row-label\">TH</div>\n <div class=\"row-bar-container\">\n <div class=\"row-bar\" id=\"TH\"></div>\n </div>\n </div>\n <div class=\"chart-row\">\n <div class=\"row-label\">FR</div>\n <div class=\"row-bar-container\">\n <div class=\"row-bar\" id=\"FR\"></div>\n </div>\n </div>\n <div class=\"chart-row\">\n <div class=\"row-label\">SA</div>\n <div class=\"row-bar-container\">\n <div class=\"row-bar\" id=\"SA\"></div>\n </div>\n </div>\n <div class=\"chart-row\">\n <div class=\"row-label\">SU</div>\n <div class=\"row-bar-container\">\n <div class=\"row-bar\" id=\"SU\"></div>\n </div>\n </div>\n <div class=\"chart-axis\">\n <span>0</span><span>10</span><span>20</span><span>30</span><span>40</span>\n </div>\n</div>\n<style>\n .chart-wrapper{\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n\n }\n .chart-row{\n position:relative;\n display: flex;\n flex-direction: row;\n width:100%;\n }\n .row-label{\n width:40px;\n font-size:12px;\n text-align:center;\n }\n .row-bar-container{\n position:relative;\n background-color:#00000020;\n width:100%;\n }\n .row-bar{\n position:relative;\n background-color:red;\n width:100%;\n height:100%;\n }\n .chart-axis{\n display: flex;\n flex-direction: row;\n padding-left: 30px;\n justify-content: space-between;\n }\n .chart-axis span{\n font-size:small;\n }\n</style>\n\n<script>\n (function(scope) {\n scope.$watch('msg', function(msg) {\n if (msg) {\n // Do something when msg arrives\n if(msg.topic){\n let t = msg.topic.toUpperCase()\n let v = (msg.payload * 100 / 40)+'%';\n let col = msg.payload > 30 ? 'red' : 'orange';\n $(\".row-bar[id=\"+t+\"]\").css({\"width\":v,\"background-color\":col})\n }\n \n }\n });\n})(scope);",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 650,
"y": 1280,
"wires": [
[]
]
},
{
"id": "20ae1040.3cf58",
"type": "ui_group",
"name": "Slider",
"tab": "6b520bda.e997a4",
"order": 1,
"disp": true,
"width": "6",
"collapse": false,
"className": ""
},
{
"id": "6b520bda.e997a4",
"type": "ui_tab",
"name": "Testing",
"icon": "dashboard",
"order": 1,
"disabled": false,
"hidden": false
}
]
Now I get to work, thank you very much ..... 
@hotNipi
Sorry, but I have a question .....
Into the template node you have a script with this instruction:
let col = msg.payload > 30 ? 'red' : 'green';
and works fine.
I modified the code in this code (I'd like to add more colors)
let val = msg.payload
if (val > 30)
{
let col = "red"
}
if (val =< 30)
{
let col = "green"
}
but don't works and I don't understand why ........
Isn’t that the same?
Change the order of those
Don't works ...
let col = msg.payload > 30 ? 'red' : msg.payload > 20 ? 'orange' : msg.payload > 10 ? 'yellow' : 'green';
$(".row-bar[id="+t+"]").css({"width":v,"background-color":col})
which is pretty same as
let col = 'green';
if(msg.payload > 30){
col = 'red' // change the value of col. do not declare again (let col =)
}
else if(msg.payload > 20){
col = 'orange'
}
else if(msg.payload > 10){
col = 'yellow'
}
$(".row-bar[id="+t+"]").css({"width":v,"background-color":col})
Ok, now works fine; thank you again ...
Thanks, edited with more clear issue description
Ok, now I understand where the problem was .....
With let inside the if blocks you were declaring two different variables that went out of scope at the end of the block.
Sorry for troubling, I should have understand it by myself, thank to all ....
it wasn't easy (for my skills) but now I'm satisfied ...
Temp min and max for each day of week ....
Thank you for code again ....
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
The OpenJS Foundation | Terms of Use | Privacy Policy | OpenJS Foundation Bylaws | Trademark Policy | Trademark List | Cookie Policy