Dashboard 2.0 ui-chart, prevent line color changes for certain data

Dashboard
,
1

I have some data. For example, it's the temperatures of cold and hot water. I wanted to plot a temperature graph with two lines. Cold temperature water - blue line. Hot water - red line.
I did it this way:

[{"id":"602a42b3526a11ca","type":"ui-chart","z":"1560eb5b71156b27","group":"9896c20104709e5e","name":"Ranrom Graph","label":"random","order":1,"chartType":"line","category":"topic","categoryType":"msg","xAxisLabel":"","xAxisProperty":"","xAxisPropertyType":"timestamp","xAxisType":"time","xAxisFormat":"","xAxisFormatType":"auto","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"","yAxisPropertyType":"property","ymin":"0","ymax":"10","bins":10,"action":"append","stackSeries":false,"pointShape":"circle","pointRadius":4,"showLegend":true,"removeOlder":"10","removeOlderUnit":"60","removeOlderPoints":"","colors":["#ff0000","#0540f0","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":"8","height":"6","className":"","interpolation":"linear","x":1080,"y":140,"wires":[[]]},{"id":"0f9a0e277b9575ec","type":"function","z":"1560eb5b71156b27","name":"func Cold","func":"msg.topic = \"Cold water\";\nmsg.series = \"Green\";\n\nreturn msg;\n","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":900,"y":100,"wires":[["602a42b3526a11ca"]]},{"id":"a882cc56df05a259","type":"function","z":"1560eb5b71156b27","name":"RND 0-10","func":"function getRandomInt(min, max) {\n  min = Math.ceil(min);\n  max = Math.floor(max);\n  msg.payload = Math.floor(Math.random() * (max - min)) + min; // The maximum is exclusive and the minimum is inclusive\n  //msg.topic = \"Улица\";\n}\ngetRandomInt(0, 10);\n\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":740,"y":100,"wires":[["0f9a0e277b9575ec"]]},{"id":"29631d97fbc429de","type":"inject","z":"1560eb5b71156b27","name":"","props":[{"p":"payload"}],"repeat":"3","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":590,"y":140,"wires":[["a882cc56df05a259","2e0f2ce0d29ac678"]]},{"id":"2e0f2ce0d29ac678","type":"function","z":"1560eb5b71156b27","name":"RND 0-10","func":"function getRandomInt(min, max) {\n  min = Math.ceil(min);\n  max = Math.floor(max);\n  msg.payload = Math.floor(Math.random() * (max - min)) + min; // The maximum is exclusive and the minimum is inclusive\n  //msg.topic = \"Улица\";\n}\ngetRandomInt(0, 10);\n\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":740,"y":160,"wires":[["e0af45181bb79007"]]},{"id":"e0af45181bb79007","type":"function","z":"1560eb5b71156b27","name":"func Hot","func":"msg.topic = \"Hot water\";\nmsg.series = \"red\";\nreturn msg;\n","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":900,"y":160,"wires":[["602a42b3526a11ca"]]},{"id":"9896c20104709e5e","type":"ui-group","name":"RNG Graph","page":"dea6077cf7050394","width":"8","height":1,"order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"dea6077cf7050394","type":"ui-page","name":"TEST RND Graph","ui":"27d73580a0f044ca","path":"/page011","icon":"home","layout":"grid","theme":"a70602e73bbb2a95","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":-1,"className":"","visible":"true","disabled":"false"},{"id":"27d73580a0f044ca","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"headerContent":"page","navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":1,"showDisconnectNotification":true,"allowInstall":false},{"id":"a70602e73bbb2a95","type":"ui-theme","name":"Admin Theme","colors":{"surface":"#454545","primary":"#d47e1c","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}},{"id":"b4eda1823615932a","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.30.1"}}]

image
image490×102 5.63 KB

image
image1201×467 26 KB

As we can see, the color is not assigned to the data from the topic msg.topic = "Cold water";
The color may change places with other data at some point.
How to force line color for data?

I studied examples from here: https://dashboard-demos.flowfuse.cloud/dashboard/charts-example
But it doesn't work here either. Let's see Grouped Bar Chart Example

image
image880×716 15.2 KB

I move the slider Slider 1 Yellow and the graph is displayed in green, although it was supposed to be drawn in yellow. It would be possible to strictly organize the sequence of data acquisition and not violate it, then the color does not mix. But this is a crutch.

2

Inject the following into your ui_chart node

[{"id":"d22ad445e1c91af8","type":"inject","z":"506727cd93754bdb","name":"","props":[{"p":"ui_update.chartOptions","v":"{\"series\": [{\"itemStyle\": {\"color\": \"red\"}}, {\"itemStyle\": {\"color\": \"blue\"}}]}","vt":"json"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":1170,"y":7260,"wires":[["647126cbc37f3067"]]}]

The colours might be the wrong way round

3

Thanks. I didn't know you could pass parameters like that.
This code does change color. But it's still not linked to data. The first values ​​received will be red, the second ones blue. You need to add some parameters so that the color is linked to msg.topic, but how?
P.S. I added a parameter "name": "Cold water", It seems to work.
It turned out like this:

{
    "series": [
        {
            "name": "Cold water",
            "itemStyle": {
                "color": "blue"
            }
        },
        {
            "name": "Hot water",
            "itemStyle": {
                "color": "red"
            }
        }
    ]
}

How often should this be sent to ui-chart ? With each new data?

4

Look at the help text for the node, that includes an example of how to do it. You have to include the series name in the ui_update message to link the name to the colour.