Old topic now new, chart line colorization?

General
1

Old topic now new, chart line colorization? Spent considerable time reading many threads on how to colorize series lines in ui_chart nodes. And I am stumped at the moment. As I understand it, I should be able to add a ui_control part to the data point message, and as long as it is { 'colors': ['red','red','red','red','red','red','red','red','red' ] } where the array is 9 elements, the data point should be 'that' color right? Index 0, first series, index 1, second series, right?

[{"id":"5822e4e79e99a650","type":"inject","z":"ab3cb18017d31f4a","name":"Red","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":90,"y":1240,"wires":[["f28464ef1b7494dd"]]},{"id":"53d75ef73e78a600","type":"ui_chart","z":"ab3cb18017d31f4a","name":"","group":"c10ca462e0388e9a","order":1,"width":0,"height":0,"label":"Test","chartType":"line","legend":"false","xformat":"auto","interpolate":"linear","nodata":"One Moment Please...","dot":false,"ymin":"","ymax":"","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":470,"y":1280,"wires":[[]]},{"id":"f28464ef1b7494dd","type":"function","z":"ab3cb18017d31f4a","name":"Red","func":"msg.ui_control={ colors: ['#FF0000','#FF0000','#FF0000','#FF0000','#FF0000','#FF0000','#FF0000','#FF0000','#FF0000'] };\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":230,"y":1280,"wires":[["53d75ef73e78a600","4d332bf51793e3e1"]]},{"id":"4d332bf51793e3e1","type":"debug","z":"ab3cb18017d31f4a","name":"Message","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":460,"y":1360,"wires":[]},{"id":"7edba99c10b2285e","type":"inject","z":"ab3cb18017d31f4a","name":"Reset","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[]","payloadType":"json","x":90,"y":1280,"wires":[["f28464ef1b7494dd"]]},{"id":"010196df0f10bbab","type":"function","z":"ab3cb18017d31f4a","name":"Blue","func":"msg.ui_control={ colors: [ '#0000FF','#0000FF','#0000FF','#0000FF','#0000FF','#0000FF','#0000FF','#0000FF','#0000FF' ] };\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":230,"y":1360,"wires":[["53d75ef73e78a600","4d332bf51793e3e1"]]},{"id":"16e22304b1d86fa0","type":"inject","z":"ab3cb18017d31f4a","name":"Blue","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":90,"y":1400,"wires":[["010196df0f10bbab"]]},{"id":"65ae9bf9a48b0c11","type":"inject","z":"ab3cb18017d31f4a","name":"Reset","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[]","payloadType":"json","x":90,"y":1360,"wires":[["010196df0f10bbab"]]},{"id":"c10ca462e0388e9a","type":"ui_group","name":"Test","tab":"13ecdbb1ece78207","order":2,"disp":true,"width":"6","collapse":false,"className":""},{"id":"13ecdbb1ece78207","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

Thinking the color might only change as the chart node is initialized or configured, I created the flow above, and that appears to be case, you can't change the color map on-demand, you have to clear the chart. Clearing a chart resets the colors?

How to set the color per data point? Without having to clear the chart? That is what I am trying to get to.

2

The chart is not designed to work like that. It would probably be easier to use a different charting library

3

Ah... Rats. I suspected that.

4

Is there a way to change the line color with out clearing the chart? I may not be able to change the color, point by point, but maybe change the 'existing' line color? So far I have only been able to change the line color when I send a payload that clears the chart.

5

It's not very clear what you are trying to achieve, but as for charting the line color should be consistently bounded to the measurement it represents. Chart does it by giving color for every unique topic it sees.
The problem is that mostly after clearing the chart, new data does not come in same order as previously. So the colors seems to be random after clearing.
But there is a trick how to properly clear the chart but still preserve the color for topic.

[{"id":"6c9cd8dbe9218058","type":"ui_button","z":"9141c3fbcc7d9e2b","name":"","group":"f6124e036e2d2ffb","order":20,"width":0,"height":0,"passthru":false,"label":"clear","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"clear","payloadType":"str","topic":"topic","topicType":"msg","x":210,"y":2460,"wires":[["6b4b6bb970dda0dd"]]},{"id":"8949afc51ab79538","type":"random","z":"9141c3fbcc7d9e2b","name":"","low":"0","high":"2","inte":"true","property":"payload","x":440,"y":2380,"wires":[["92e2708c2d124a5d"]]},{"id":"fcb16756c056aca6","type":"inject","z":"9141c3fbcc7d9e2b","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"2","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":270,"y":2380,"wires":[["8949afc51ab79538"]]},{"id":"92e2708c2d124a5d","type":"function","z":"9141c3fbcc7d9e2b","name":"random data with known topics","func":"let topics = ['One','Two','Three']\nmsg.topic = topics[msg.payload]\nmsg.payload = parseFloat((Math.random()*5).toFixed(2))\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":670,"y":2380,"wires":[["63f3bdfea7195eea","09768a91219792a6"]]},{"id":"63f3bdfea7195eea","type":"debug","z":"9141c3fbcc7d9e2b","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":930,"y":2380,"wires":[]},{"id":"6b4b6bb970dda0dd","type":"function","z":"9141c3fbcc7d9e2b","name":"Clear chart but keep the colors by topic in order","func":"node.send({payload:[]})\nlet topics = ['One', 'Two', 'Three']\nfor (var i = 0;i<3;++i){\n    node.send({payload:null,topic:topics[i]})\n}\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":560,"y":2460,"wires":[["09768a91219792a6"]]},{"id":"09768a91219792a6","type":"ui_chart","z":"9141c3fbcc7d9e2b","name":"","group":"f6124e036e2d2ffb","order":21,"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":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"className":"","x":930,"y":2460,"wires":[[]]},{"id":"f6124e036e2d2ffb","type":"ui_group","name":"Default","tab":"34ab7d39f3e308fc","order":1,"disp":true,"width":"5","collapse":false,"className":""},{"id":"34ab7d39f3e308fc","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
6

How can I communicate it better... humm. Ok, so I set the colors for the chart, replacing the default colors. Done and done. Then I send messages to the chart, and the resulting line is color X. Done and done. But, because the source data changed, want to change the line color at that point. That is the issue, when I change the colors again, the line continues in the original color, not the new color. If I clear the chart, the new color appears. Does this explain the issue better? Moreover, if I leave the tab, go to another tab, then come back to the tab with the chart, the new color is present. So, there is some way, to get the line color to change with out clearing the chart. How is that done is the standing question at this point.

I once believed that there was no way to change the line color other than to set the color table (array) and clear the chart to show the new color table (array). But that is not entirely the case, because if I jump to a different tab, and return the chart tab, the new color is there! And the chart was not cleared, but (I believe) just redrawn. So, is there a way to get the chart to redraw or refresh without an explicit clear message? If that is possible, that would be what I am trying to get to... the new colors honored without losing the existing data in the chart.

If there is no way to get the chart to re-draw or render given the current design? That is ok, but not the answer I was hoping for. :slight_smile:

7

This hack can change the line colour when value changes, it relies on sending two topic and null values to skip plotting lines. Not sure if this is what you are after hope it may help.

[{"id":"9583aaf4.84ccd","type":"inject","z":"bf9e1e33.030598","name":"","props":[{"p":"payload"}],"repeat":"2","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"$ceil($random()*10)","payloadType":"jsonata","x":160,"y":80,"wires":[["1932aeea.6c7d71"]]},{"id":"1932aeea.6c7d71","type":"function","z":"bf9e1e33.030598","name":"","func":"const output = [\n    {payload:msg.payload,topic:\"temp\"},\n    {payload:msg.payload, topic:\"temp \"}\n]\nconst change = 5;\nconst index = (msg.payload <= change) ? 1 : 0;\nconst stored_index = context.get(\"stored_index\") || index;\nif (stored_index != index){\n    output[index].payload = null;\n}\ncontext.set(\"stored_index\", index);\nreturn [output];","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":330,"y":80,"wires":[["af74b097.39bb9"]]},{"id":"af74b097.39bb9","type":"ui_chart","z":"bf9e1e33.030598","name":"","group":"2d4fe667.28f8ba","order":8,"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,"useUTC":false,"colors":["#5fad47","#d73920","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"className":"","x":490,"y":80,"wires":[[]]},{"id":"690bdab4.d11c3c","type":"inject","z":"bf9e1e33.030598","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[]","payloadType":"json","x":180,"y":140,"wires":[["af74b097.39bb9"]]},{"id":"2d4fe667.28f8ba","type":"ui_group","name":"demo","tab":"1caa8458.b17814","order":1,"disp":true,"width":"12","collapse":false},{"id":"1caa8458.b17814","type":"ui_tab","name":"Demo","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

chrome_screenshot_1656198433009
chrome_screenshot_16561984330092048×1147 165 KB

8

Ah, Nice. Thanks. Will try this out. Since I am using a gradient as generator for the source color, I am not sure I can get the line color to change per the gradient, but that is ok. If I can just change the entire line as the gradient changes that would be ideal. That is actually working with what I have now... I just have to change the color table, and then change the color (array) palette for the chart. What has got me scratching my head... is that the line color changes if I leave the tab and return to it... without clearing the chart. So something is reading the new color palette and using it, on the ui_control change event, I am suspecting.

9

May be some thing like this as payload changes from 1-10 the line colour changes, Ive set it with 3 colour changes but you could have any gradient.

[{"id":"effe8553.4d0fa","type":"inject","z":"bf9e1e33.030598","name":"","props":[{"p":"payload"}],"repeat":"2","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"$ceil($random()*10)","payloadType":"jsonata","x":220,"y":3960,"wires":[["792bce40.2c652"]]},{"id":"792bce40.2c652","type":"function","z":"bf9e1e33.030598","name":"","func":"const output = context.get(\"chart_data\") || \n    [{\"series\":[\"one\",\"two\",\"three\"],\"data\":[[],[],[]],\"labels\":[],\"index\":0}];\nconst r = [1,10,0,2];\nconst limit = 40;\nconst index = Math.round((msg.payload - r[0]) * (r[3] - r[2]) / (r[1] - r[0]) + r[2]);\nconst last_index = output[0].index;\nconst time = new Date().valueOf();\nconst hold = output[0].data[last_index];\nhold.push({\"x\": time, \"y\": msg.payload})\noutput[0].data[index] = hold.slice(-limit);\nif (last_index != index) output[0].data[last_index] = [];\noutput[0].index = index;\n\ncontext.set(\"chart_data\", output);\nmsg.payload = output;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":430,"y":3960,"wires":[["e32506e0.02425","4d332bf51793e3e1"]]},{"id":"e32506e0.02425","type":"ui_chart","z":"bf9e1e33.030598","name":"","group":"2d4fe667.28f8ba","order":8,"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,"useUTC":false,"colors":["#5fad47","#d73920","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"className":"","x":630,"y":3960,"wires":[[]]},{"id":"4d332bf51793e3e1","type":"debug","z":"bf9e1e33.030598","name":"Message","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":540,"y":3860,"wires":[]},{"id":"89d07c72.301b78","type":"inject","z":"bf9e1e33.030598","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[]","payloadType":"json","x":320,"y":4020,"wires":[["e32506e0.02425"]]},{"id":"2d4fe667.28f8ba","type":"ui_group","name":"demo","tab":"1caa8458.b17814","order":1,"disp":true,"width":"12","collapse":false},{"id":"1caa8458.b17814","type":"ui_tab","name":"Demo","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

It's storing the live readings and the doing chart each time, i have set a limit of 40 points.

10

Ah, so in effect create a buffer so as the buffer is pushed to the chart you could clear the native buffer in the chart. That is worth a try as well. I had already thought of this, but had not tried it, hoping to find something less complex.

11

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.