Weird chart happenings

Dashboard
1

Ok, not good, but:

NR 1.2.6
Dashboard 2.26.2
RasPiZ(W)

Screenshot from 2021-10-02 06-34-44

This is the desired output.

This is taken from my real machine. NUC, Ubuntu and a lot of memory.

I power it (this machine) up and load the page with said graph.

Now and then the two traces are swapped.
That is: Temperature is BLACK and Load is RED.
No big, but it catches me.

This Happened today when I booted up.
What I am doing to try and stop this happening is a couple of nodes after the chart node that check the messages and detect if the messages are in the wrong order. Though I suspect it is wrong for reasons I am about to explain.

Given: The chart is showing the WRONG colours.
I get two messages and I did a switch checking one, then another checking the second - which I see is also not going to work. But indulge me.

The chart is showing the wrong colour for the load/temperature.
I'm not getting any messages out. Hmmmm.. :confused:
I'll go back to the GUI page and wait for a message to go through.
(I have a Heartbeat signal showing when this happens)
Seen it.
Go back to the edit page.
No message/s. :confused:

Go back to the GUI
HANG ON!
Now the colours are as I want them.

The nodes I just put in are NOT connected to anything yet.
I was only at the stage where I was wanting to check a signal was going to be sent if/when the messages arrive in the wrong order.
So they couldn't have done anything.

But the initial loading of the GUI page showed the wrong colours.
Subsequent views: they swapped.

Thoughts?

2

I seem to recall something about the first data in gets the first colour? Could that be what you are describing?

3

Correct.

On boot I send messages into a subflow which "handles" that stuff and sends them in the correct order to the chart.

But what is rubbing me is that the machine is on. 24/7. I turn on the machine and look at the web page.
The colours are reversed.
But either from refreshing the screen (which I didn't do this time) or... something else (unknown) they swapped back to how I want them.

How?

This is an exert from the flow:

[{"id":"80b0e258.e7dc5","type":"subflow","name":"Chart driver","info":"","category":"","in":[{"x":160,"y":320,"wires":[{"id":"db06f960.5e9f18"}]}],"out":[{"x":1210,"y":210,"wires":[{"id":"83acadaa.7477","port":0}]},{"x":1210,"y":260,"wires":[{"id":"2544e7e2.f745a8","port":0}]},{"x":1210,"y":310,"wires":[{"id":"90809ac2.c19238","port":0}]},{"x":1210,"y":370,"wires":[{"id":"92bb3e42.869668","port":0}]},{"x":1210,"y":420,"wires":[{"id":"556a442b.6e6464","port":0}]},{"x":1210,"y":470,"wires":[{"id":"2544e7e2.f745a8","port":0}]}],"env":[],"color":"#3FADB5","outputLabels":["VCGen output","Temperature GAUGE output","Chart output","CPU load output","MQTT CPU load output","MQTT Temperature output"],"icon":"node-red-dashboard/ui_chart.png","status":{"x":1210,"y":520,"wires":[{"id":"27bc13e8.c5530c","port":0}]}},{"id":"92bb3e42.869668","type":"cpu","z":"80b0e258.e7dc5","name":"","msgCore":false,"msgOverall":true,"msgArray":false,"msgTemp":false,"x":500,"y":371,"wires":[["556a442b.6e6464","39e1390e.286e1e"]]},{"id":"556a442b.6e6464","type":"function","z":"80b0e258.e7dc5","name":"Set TOPIC","func":"msg.topic=global.get('myDeviceName');\nmsg.topic =\"STATUS/\" + msg.topic;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":660,"y":420,"wires":[[]]},{"id":"2544e7e2.f745a8","type":"function","z":"80b0e258.e7dc5","name":"Make number and set Topic","func":"//msg.payload = Number(msg.payload)/10;\nmsg.topic=global.get('myDeviceName');\nmsg.topic =\"TEMPERATURE/\" + msg.topic;\nreturn msg;\n","outputs":1,"noerr":0,"x":590,"y":260,"wires":[["747e572.fa24628"]]},{"id":"83acadaa.7477","type":"vcgencmd","z":"80b0e258.e7dc5","name":"Check Temp","command":"measure_temp","codec":"H264","clock":"core","voltage":"core","memory":"arm","videoOutput":"0","separateMsg":false,"x":500,"y":210,"wires":[["2544e7e2.f745a8"]]},{"id":"39e1390e.286e1e","type":"delay","z":"80b0e258.e7dc5","name":"Delay","pauseType":"delay","timeout":"500","timeoutUnits":"milliseconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":660,"y":350,"wires":[["5e757639.3b333"]]},{"id":"747e572.fa24628","type":"change","z":"80b0e258.e7dc5","name":"","rules":[{"t":"set","p":"topic","pt":"msg","to":"Temperature","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":775,"y":310,"wires":[["90809ac2.c19238"]],"l":false},{"id":"db06f960.5e9f18","type":"switch","z":"80b0e258.e7dc5","name":"Route messages","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"BOOT SIGNAL","vt":"str"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":300,"y":320,"wires":[["90809ac2.c19238"],["83acadaa.7477","92bb3e42.869668"]]},{"id":"27bc13e8.c5530c","type":"status","z":"80b0e258.e7dc5","name":"","scope":["90809ac2.c19238"],"x":730,"y":520,"wires":[[]]},{"id":"90809ac2.c19238","type":"function","z":"80b0e258.e7dc5","name":"Work on this node","func":"var x = msg.payload;\nif (msg.payload == \"BOOT SIGNAL\")\n{\n    context.set(\"BOOTED\",1);\n    node.status({text:\"Reboot singal received\"});\n    msg.payload = [ ];\n    return msg;\n}\nvar booted = context.get(\"BOOTED\") || 0;\nif (booted == 1)\n{\n    //\n    //  booted flag set.\n    if (msg.topic == \"Temperature\")\n    {\n        //  The correct message has now been received.\n        context.set(\"BOOTED\",0);\n        return msg;\n    }\n    node.status({text:\"Trying to wipe graph\"});\n    //  HEARTBEAT message received.\n//    context.set(\"BOOTED\",2);\n    //\n    msg.payload = [ ];\n}\nelse\nnode.status({text:\"\"});\nreturn msg;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","x":910,"y":330,"wires":[[]]},{"id":"5e757639.3b333","type":"change","z":"80b0e258.e7dc5","name":"","rules":[{"t":"set","p":"topic","pt":"msg","to":"Load","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":775,"y":350,"wires":[["90809ac2.c19238"]],"l":false},{"id":"d7cd04be.ae933","type":"subflow:80b0e258.e7dc5","z":"9b7e7466.a4b698","name":"","env":[],"x":1350,"y":330,"wires":[["4033a7bc.8a48a"],["6cdb7a0f.bfd02c","d2dc44ff.435c2"],["19cb42a6.97bbb5","c60cd4ee.63cab"],["8e629d11.9c4bf","eb757cb4.300a3","f25cd495.71722"],["56ad688.9089898"],["a6924ea0.caa7e"]]},{"id":"19cb42a6.97bbb5","type":"ui_chart","z":"9b7e7466.a4b698","name":"","group":"b91547a3.789ea","order":7,"width":"5","height":"5","label":"History","chartType":"line","legend":"true","xformat":"HH:mm:ss","interpolate":"linear","nodata":"No Comms","dot":false,"ymin":"","ymax":"","removeOlder":"1","removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#ff0000","#000000","#ff7f0e","#2ca02c","#98df8a","#bf7878","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"x":1570,"y":310,"wires":[["8dcc7198.fe5b8","56362ac8.333c04"]]},{"id":"b91547a3.789ea","type":"ui_group","z":"9b7e7466.a4b698","name":"TelePi Telemerty","tab":"3245f51f.065aba","order":1,"disp":true,"width":"7","collapse":false},{"id":"3245f51f.065aba","type":"ui_tab","name":"TelePi Telemetry","icon":"track_changes","order":1,"disabled":false,"hidden":false}]

There is a boot signal send in at start to make sure the chart is clear.

Then the messages arrive - at about the same time and are sequenced before being sent to the chart node.

So how can the colours swap when I load the page on another machine?
(then swap back with no control input from me.)

4

Just a random @zz guess... Being that the webpage is, if correct in my understanding, processing the ui side only when that page is in focus, the very act of leaving and returning to the page may have an effect on perceived legend's data order??

5

Each "client" that runs the ui_dashboard is effectively running/interpreting the HTML data on it's own. I suspect that as the colour order seems to be chosen on the fly by the ui_chart, thus you may be getting a colour mix-up based on whatever data is registering first on that particular browser.

Again, mostly an intuitive, if not educated, guess :stuck_out_tongue: If I am wrong, then I am sure someone will be able to educate us both.

6

I don't think that is correct. I believe that the chart is built and the colours assigned in the server. If a browser connects some time after node-red is started then it immediately gets a full chart, it does not start up from empty again.

The way to make sure the colours are consistent is to arrange a trigger node set to fire at startup which sends, in sequence, an empty payload for each topic. Then the colours should always be the same.

7

(Typically for me)

This is on going.

I have to wait for it to happen again (show itself) and monitor the messages coming out of the chart and see if there is a difference to what they are normally.
(Like their order)

8

Yes... after actually doing some testing :stuck_out_tongue: I can say that the chart retains it's multi-line colour order even after the data point (the topic name) is removed/changed, or the order of the msgs is changed.

It seems that I needed to delete/replace the ui_graph node in order to start afresh.

I have nothing further to contribute to this issue as I can only see it as being too persistent in colour order... go fig.

9

Restart node-red, or full deploy, will do it I think, provided the topics then appear initially in a different order.

10

Yes, a full restart would obviously... but not one I mentioned in testing the persistence during editing. I didn't try a full deploy since... well... I forgot :stuck_out_tongue: as I use partial.

11

(Sorry guys...)

Yeah, ok.

Just to share more....

This is a subflow I use to drive the chart (and gauges) so the order SHOULD remain the same over time.

[{"id":"80b0e258.e7dc5","type":"subflow","name":"Chart driver","info":"","category":"","in":[{"x":160,"y":320,"wires":[{"id":"db06f960.5e9f18"}]}],"out":[{"x":1090,"y":210,"wires":[{"id":"83acadaa.7477","port":0}]},{"x":1090,"y":260,"wires":[{"id":"2544e7e2.f745a8","port":0}]},{"x":1090,"y":310,"wires":[{"id":"90809ac2.c19238","port":0}]},{"x":1090,"y":370,"wires":[{"id":"92bb3e42.869668","port":0}]},{"x":1090,"y":420,"wires":[{"id":"556a442b.6e6464","port":0}]},{"x":1090,"y":470,"wires":[{"id":"2544e7e2.f745a8","port":0}]}],"env":[],"color":"#3FADB5","outputLabels":["VCGen output","Temperature GAUGE output","Chart output","CPU load output","MQTT CPU load output","MQTT Temperature output"],"icon":"node-red-dashboard/ui_chart.png","status":{"x":1090,"y":520,"wires":[{"id":"94521551.406ea8","port":0}]}},{"id":"92bb3e42.869668","type":"cpu","z":"80b0e258.e7dc5","name":"","msgCore":false,"msgOverall":true,"msgArray":false,"msgTemp":false,"x":500,"y":371,"wires":[["556a442b.6e6464","39e1390e.286e1e"]]},{"id":"556a442b.6e6464","type":"function","z":"80b0e258.e7dc5","name":"Set TOPIC","func":"msg.topic=global.get('myDeviceName');\nmsg.topic =\"STATUS/\" + msg.topic;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":660,"y":420,"wires":[[]]},{"id":"2544e7e2.f745a8","type":"function","z":"80b0e258.e7dc5","name":"Make number and set Topic","func":"//msg.payload = Number(msg.payload)/10;\nmsg.topic=global.get('myDeviceName');\nmsg.topic =\"TEMPERATURE/\" + msg.topic;\nreturn msg;\n","outputs":1,"noerr":0,"x":590,"y":260,"wires":[["747e572.fa24628"]]},{"id":"83acadaa.7477","type":"vcgencmd","z":"80b0e258.e7dc5","name":"Check Temp","command":"measure_temp","codec":"H264","clock":"core","voltage":"core","memory":"arm","videoOutput":"0","separateMsg":false,"x":500,"y":210,"wires":[["2544e7e2.f745a8"]]},{"id":"39e1390e.286e1e","type":"delay","z":"80b0e258.e7dc5","name":"Delay","pauseType":"delay","timeout":"500","timeoutUnits":"milliseconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":660,"y":350,"wires":[["1378232c.113a65"]]},{"id":"747e572.fa24628","type":"change","z":"80b0e258.e7dc5","name":"","rules":[{"t":"set","p":"topic","pt":"msg","to":"Temperature","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":775,"y":310,"wires":[["90809ac2.c19238"]],"l":false},{"id":"db06f960.5e9f18","type":"switch","z":"80b0e258.e7dc5","name":"Route messages","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"BOOT SIGNAL","vt":"str"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":300,"y":320,"wires":[["90809ac2.c19238"],["83acadaa.7477","92bb3e42.869668"]]},{"id":"da760e82.f7afd8","type":"function","z":"80b0e258.e7dc5","name":"older one","func":"var x = msg.payload;\nif (msg.payload == \"BOOT SIGNAL\")\n{\n    context.set(\"BOOTED\",1);\n    node.status({text:\"Reboot singal received\"});\n    return;\n}\nvar booted = context.get(\"BOOTED\") || 0;\nif (booted == 1)\n{\n    //  booted flag set.\n    node.warn(x);\n    node.status({text:\"Trying to wipe graph\"});\n    //  HEARTBEAT message received.\n    context.set(\"BOOTED\",0);\n    msg.payload = [ ];\n    return msg;\n}\n\n//{\n//    //  Wipe graphs.\n//    msg.payload = [ ];\n//    return msg;\n//}\nmsg.topic = \"load\";\nreturn msg;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":420,"y":450,"wires":[[]]},{"id":"94521551.406ea8","type":"status","z":"80b0e258.e7dc5","name":"","scope":["90809ac2.c19238"],"x":740,"y":520,"wires":[[]]},{"id":"90809ac2.c19238","type":"function","z":"80b0e258.e7dc5","name":"Work on this node","func":"var x = msg.payload;\nif (msg.payload == \"BOOT SIGNAL\")\n{\n    context.set(\"BOOTED\",1);\n    node.status({text:\"Reboot singal received\"});\n    msg.payload = [ ];\n    return msg;\n}\nvar booted = context.get(\"BOOTED\") || 0;\nif (booted == 1)\n{\n    //\n    //  booted flag set.\n    if (msg.topic == \"Temperature\")\n    {\n        //  The correct message has now been received.\n        context.set(\"BOOTED\",0);\n        return msg;\n    }\n    node.status({text:\"Trying to wipe graph\"});\n    //  HEARTBEAT message received.\n//    context.set(\"BOOTED\",2);\n    //\n    msg.payload = [ ];\n}\nelse\nnode.status({text:\"\"});\nreturn msg;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":920,"y":330,"wires":[[]]},{"id":"30cfac6b.20a664","type":"function","z":"80b0e258.e7dc5","name":"F wipe graph","func":"var x = msg.payload;\nif (msg.payload == \"BOOT SIGNAL\")\n{\n    context.set(\"BOOTED\",1);\n    node.status({text:\"Reboot singal received\"});\n    return;\n}\nvar booted = context.get(\"BOOTED\") || 0;\nif (booted == 1)\n{\n    //  booted flag set.\n    node.status({text:\"Trying to wipe graph\"});\n    //  HEARTBEAT message received.\n    context.set(\"BOOTED\",2);\n    msg.payload = [ ];\n    return msg;\n} else\nif (booted == 2)\n{\n    node.status({text:\" \"});\n    context.set(\"BOOTED\",0);\n}\n\n//{\n//    //  Wipe graphs.\n//    msg.payload = [ ];\n//    return msg;\n//}\nmsg.topic = \"load\";\nreturn msg;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":430,"y":500,"wires":[[]]},{"id":"1378232c.113a65","type":"change","z":"80b0e258.e7dc5","name":"","rules":[{"t":"set","p":"topic","pt":"msg","to":"Load","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":775,"y":350,"wires":[["90809ac2.c19238"]],"l":false},{"id":"2f279767.f796f8","type":"subflow:80b0e258.e7dc5","z":"675e227d.d158b4","name":"","env":[],"x":1130,"y":540,"wires":[["e5e1435e.f76698","7b75b896.45276"],["384bda63.64cd0e","cf5c5204.665cb","b34a5a52.885dd"],["326533b6.5dbaf4","e13b2f23.0be46"],["164c9f51.747fa1","bef6d26.b55b9b"],["fa0a2798.6a30c"],["b051b727.7fea48"]]}]
12

FYI, that didn't seem to reset the ui_chart either, after I changed order of msgs, as color order stayed as before, but disabling/reenabling did.

13

Yeah, but the message/colour association is already/then set.

That won't help.

But what I am seeing is implying that they can change for reasons unknown.

But then refreshing the page (not the flow) seems to put them back to what they should be.
So I guess I am kind of agreeing with what you said in some way.

14

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