Chart line color

hello everybody
can i give for each topic a color programmatically ? for example i'm gonna create a table and add for every topic its color , then when i receive a data i will give the color that matchs with its topic , please help me to do it ...
i wanna just to know how to give the colors by code , not from the node
and thanks in advance

No super simple way to do that. But what you can do is preset them in the order you want. The colours are set in the config. The first topic to arrive gets first colour, etc. So create an inject that sends a null message on each topic in order you want at deploy time. Then when real data arrives it will pick up the colour you want.

2 Likes

thank you for your quick response
the problem is that i have to monitor my system , so if everything is ok the line color will be green(always green), im receiving data from sensors and it may be defected ,and if its the first data it will get green as color...but me i wanna set green color when everything is ok ...

I can’t think of a way to set the colour dynamically.

1 Like

ok , Thanks for your time !
Have a nice day .

Possibly you could use two different lines of different colours and feed the value to one or the other dependent on the value. Is it possible to stop a line by sending it null or something so there would be a gap in the first one while the other took over.

interesting thought - they wouldn't join up directly of course unless you sent the value to both topics so they appear to be on top of each other at that instant - but yes sending null will cause points not to be plotted so this could work... would be an interesting test / example for flows site.

1 Like

This might be usable

[{"id":"9e863e1e.6e8ce8","type":"function","z":"514a90a5.c7bae8","name":"Sin","func":"msg.payload = Math.sin(msg.payload/4000)\nreturn msg;","outputs":1,"noerr":0,"x":306.5,"y":159,"wires":[["4151227a.e0dd7c"]]},{"id":"b1d4bffb.22aab8","type":"inject","z":"514a90a5.c7bae8","name":"0.5 sec timestamp","topic":"","payload":"","payloadType":"date","repeat":"0.5","crontab":"","once":false,"onceDelay":0.1,"x":128.5,"y":159,"wires":[["9e863e1e.6e8ce8"]]},{"id":"a76560d8.af7618","type":"ui_chart","z":"514a90a5.c7bae8","name":"","group":"39b33e51.922692","order":0,"width":0,"height":0,"label":"chart","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"60","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"x":603.5,"y":159,"wires":[[],[]]},{"id":"4151227a.e0dd7c","type":"function","z":"514a90a5.c7bae8","name":"Set Topics","func":"let threshold = 0.5\nlet lowTopic = \"low\"\nlet highTopic = \"high\"\nlet thisTopic;\nlet totherTopic\nif (msg.payload > threshold) {\n    thisTopic = highTopic\n    totherTopic = lowTopic\n} else {\n    thisTopic = lowTopic\n    totherTopic = highTopic\n}\nlet lastTopic = context.get('last') || thisTopic\nlet msg2 = null\nif (thisTopic != lastTopic) {\n    // just crossed the threshold, send to both lines\n    msg.topic = lastTopic\n    msg2 = {payload: msg.payload, topic: thisTopic}\n} else {\n    msg.topic = thisTopic\n    msg2 = {payload: null, topic: totherTopic} // leave payload null to stop the line\n}\ncontext.set('last', thisTopic)\nreturn [[msg, msg2]];","outputs":1,"noerr":0,"x":453,"y":159,"wires":[["a76560d8.af7618"]]},{"id":"39b33e51.922692","type":"ui_group","z":"","name":"Default","tab":"55546119.d20b2","disp":true,"width":"6","collapse":false},{"id":"55546119.d20b2","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

I have added this to the flow library at https://flows.nodered.org/flow/a78ac10821112eb07fb8be8957a9f7cb

That is a thing of beauty... ! Nice work.

Hmm, not sure I would go quite that far.

Ok. Was just as I imagined, and what I wanted added to flows.

On second thoughts I liked your first response better :slight_smile:

Hello All,
I've graph with data dump in following way in function block..

    var data = [
        { topic: "value", payload: msg.payload},
        { topic: "Top", payload: 11.3 },
        { topic: "Control", payload: 10.5},
    ]
    data.ui_control = { "colors": ['#FF0000', '#00FF00', '#0000FF', '#000000', '#000000', '#000000', '#000000', '#000000', '#000000'] };
    return [data]

My issue is, unable to override color setting from ui_control.

I wish that I could set color for each topic like {topic:"line1",paload:msg.payload,color:"red"}

Any help appreciated!!