Chart - set color bar

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)

chart

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
    }
]
1 Like

Now I get to work, thank you very much ..... :+1:

@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 ...

img01

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 ...

Deleted - @hotNipi explained better while I was typing!

1 Like

Thanks, edited with more clear issue description

1 Like

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.

1 Like

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 ....

chart

2 Likes