Help chart multiple series. Migration code D1 to D2

Dashboard
1

Hi,
I like node-red because nodes are a true low-code approach.
The Dashboard 1 library is very affordable, but based on my user review, I find Dashboard 2 becoming more and more complex.
The basic user is forgotten to the detriment of the user experienced in JS code.
View this remark constructively.

So I'm trying to use the new version, but I'm having trouble, could you help me. It's definitely me who's doing it wrong... :stuck_out_tongue_winking_eye:

code Dashboard 2

let i=0;
var label=[];
var datax = [];
var datay = [];
var dataz = [];

while (i < 360) { // affiche 0, puis 1, puis 2
label.push(i);
datax.push(msg.payload.data.x_axis.axis_data[(i)]);
datay.push(msg.payload.data.y_axis.axis_data[(i)]);
dataz.push(msg.payload.data.z_axis.axis_data[(i)]);
i++;
} 
msg = {
        "payload": [{
            "series": "Axe X",
            "x": label,
            "y": datax
        }, {
            "series": "Axe Y",
            "x": label,
            "y": datay
        }, {
            "series": "Axe Z",
            "x": label,
            "y": dataz
        }]
    }
return msg;

code Dashboard 1

let i=0;
var label=[];
var datax = [];
var datay = [];
var dataz = [];

while (i < 360) { // affiche 0, puis 1, puis 2
label.push(i);
datax.push(msg.payload.data.x_axis.axis_data[(i)]);
datay.push(msg.payload.data.y_axis.axis_data[(i)]);
dataz.push(msg.payload.data.z_axis.axis_data[(i)]);
i++;
}
msg.payload = [{
    "series": ["Axe X", "Axe Y", "Axe Z"],
   "data": [datax,datay,dataz],
    "labels": label
}];
return msg;
2

I've been playing with the DB2 chart this past week. Here is a test flow I used when figuring out how to get it to work

[{"id":"a9cd327f8b3a7841","type":"ui-chart","z":"4dd5d4a3ab3afca3","group":"62ed257e7cd10895","name":"","label":"chart db2","order":1,"chartType":"line","category":"topic","categoryType":"msg","xAxisLabel":"X-axis label","xAxisProperty":"","xAxisPropertyType":"msg","xAxisType":"time","xAxisFormat":"y-L-d-HH-mm","xAxisFormatType":"custom","yAxisLabel":"Y-axis label","yAxisProperty":"","ymin":"","ymax":"","action":"append","pointShape":"line","pointRadius":4,"showLegend":true,"removeOlder":"6","removeOlderUnit":"86400","removeOlderPoints":"","colors":["#ff2600","#0433ff","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"width":"12","height":8,"className":"","x":400,"y":200,"wires":[[]]},{"id":"d70ba1067850997e","type":"catch","z":"4dd5d4a3ab3afca3","name":"","scope":null,"uncaught":false,"x":520,"y":60,"wires":[["dbe939a5f01ce697"]]},{"id":"dbe939a5f01ce697","type":"debug","z":"4dd5d4a3ab3afca3","name":"debug 3423","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":510,"y":120,"wires":[]},{"id":"3eb79f11230ebe06","type":"inject","z":"4dd5d4a3ab3afca3","name":"Clear Chart","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[]","payloadType":"json","x":150,"y":100,"wires":[["a9cd327f8b3a7841"]]},{"id":"225268fa2788eb57","type":"inject","z":"4dd5d4a3ab3afca3","name":"sunroom temp","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"sunroom","payload":"[{\"x\":1720147676000,\"y\":45},{\"x\":1720147709000,\"y\":67},{\"x\":1720147741000,\"y\":53}]","payloadType":"json","x":140,"y":200,"wires":[["a9cd327f8b3a7841"]]},{"id":"ff97e93fff6d9937","type":"inject","z":"4dd5d4a3ab3afca3","name":"Hall test","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"hall","payload":"[{\"x\":1720147676000,\"y\":70},{\"x\":1720147709000,\"y\":75},{\"x\":1720147709000,\"y\":72},{\"x\":1720147741000,\"y\":77}]","payloadType":"json","x":140,"y":280,"wires":[["a9cd327f8b3a7841"]]},{"id":"c9f01605624c09c3","type":"inject","z":"4dd5d4a3ab3afca3","name":"sunroom humidity ","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"sunroom Humi","payload":"[{\"x\":1720147676000,\"y\":51},{\"x\":1720147709000,\"y\":67},{\"x\":1720147709000,\"y\":75},{\"x\":1720147741000,\"y\":68}]","payloadType":"json","x":150,"y":240,"wires":[["a9cd327f8b3a7841"]]},{"id":"62ed257e7cd10895","type":"ui-group","name":"Group Name","page":"cd1479b25303c569","width":"12","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"cd1479b25303c569","type":"ui-page","name":"Page Name","ui":"8406fe27a9f7fb0c","path":"/all-test","icon":"home","layout":"grid","theme":"f6a83c6d9580e8ea","order":1,"className":"","visible":true,"disabled":false},{"id":"8406fe27a9f7fb0c","type":"ui-base","name":"Dashboard 2","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control","ui-form","ui-text-input","ui-file-input","ui-button","ui-button-group","ui-dropdown","ui-radio-group","ui-slider","ui-switch","ui-text","ui-table","ui-template","ui-markdown","ui-gauge"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"default","titleBarStyle":"default"},{"id":"f6a83c6d9580e8ea","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094CE","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

Hopefully it will help you out.

[EDITED]

Here is the chart with some buttons to feed in the data:

[{"id":"a9cd327f8b3a7841","type":"ui-chart","z":"4dd5d4a3ab3afca3","group":"62ed257e7cd10895","name":"demo chart","label":"DB2 Chart","order":5,"chartType":"line","category":"topic","categoryType":"msg","xAxisLabel":"X-axis label","xAxisProperty":"","xAxisPropertyType":"msg","xAxisType":"time","xAxisFormat":"y-L-d-HH-mm","xAxisFormatType":"custom","yAxisLabel":"Y-axis label","yAxisProperty":"","ymin":"","ymax":"","action":"append","pointShape":"line","pointRadius":4,"showLegend":true,"removeOlder":"6","removeOlderUnit":"86400","removeOlderPoints":"","colors":["#ff2600","#0433ff","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"width":"12","height":8,"className":"","x":610,"y":220,"wires":[[]]},{"id":"d70ba1067850997e","type":"catch","z":"4dd5d4a3ab3afca3","name":"","scope":null,"uncaught":false,"x":180,"y":80,"wires":[["dbe939a5f01ce697"]]},{"id":"dbe939a5f01ce697","type":"debug","z":"4dd5d4a3ab3afca3","name":"debug 3423","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":370,"y":80,"wires":[]},{"id":"3eb79f11230ebe06","type":"inject","z":"4dd5d4a3ab3afca3","name":"Clear Chart","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[]","payloadType":"json","x":130,"y":160,"wires":[["6ee3d6ae3faf5525"]]},{"id":"225268fa2788eb57","type":"inject","z":"4dd5d4a3ab3afca3","name":"sunroom temp","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"sunroom","payload":"[{\"x\":1720147676000,\"y\":45},{\"x\":1720147709000,\"y\":67},{\"x\":1720147741000,\"y\":53}]","payloadType":"json","x":140,"y":200,"wires":[["03647ba20e60e7cf"]]},{"id":"ff97e93fff6d9937","type":"inject","z":"4dd5d4a3ab3afca3","name":"Hall test","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"hall","payload":"[{\"x\":1720147676000,\"y\":70},{\"x\":1720147709000,\"y\":75},{\"x\":1720147709000,\"y\":72},{\"x\":1720147741000,\"y\":77}]","payloadType":"json","x":120,"y":280,"wires":[["2287e96d84eec41d"]]},{"id":"c9f01605624c09c3","type":"inject","z":"4dd5d4a3ab3afca3","name":"sunroom humidity ","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"sunroom Humi","payload":"[{\"x\":1720147676000,\"y\":51},{\"x\":1720147709000,\"y\":67},{\"x\":1720147709000,\"y\":75},{\"x\":1720147741000,\"y\":68}]","payloadType":"json","x":150,"y":240,"wires":[["085301bd6951b0fe"]]},{"id":"03647ba20e60e7cf","type":"ui-button","z":"4dd5d4a3ab3afca3","group":"62ed257e7cd10895","name":"","label":"sunroom temp","order":3,"width":"1","height":"1","emulateClick":true,"tooltip":"","color":"","bgcolor":"","className":"","icon":" mdiThermometer","iconPosition":"left","payload":"[{\"x\":1720147676000,\"y\":45},{\"x\":1720147709000,\"y\":67},{\"x\":1720147741000,\"y\":53}]","payloadType":"json","topic":"sunroom","topicType":"str","x":340,"y":200,"wires":[["a9cd327f8b3a7841"]]},{"id":"2287e96d84eec41d","type":"ui-button","z":"4dd5d4a3ab3afca3","group":"62ed257e7cd10895","name":"","label":"Hall test","order":4,"width":"1","height":"1","emulateClick":true,"tooltip":"","color":"","bgcolor":"","className":"","icon":" mdiThermometer","iconPosition":"left","payload":"[{\"x\":1720147676000,\"y\":70},{\"x\":1720147709000,\"y\":75},{\"x\":1720147709000,\"y\":72},{\"x\":1720147741000,\"y\":77}]","payloadType":"json","topic":"hall","topicType":"str","x":320,"y":280,"wires":[["a9cd327f8b3a7841"]]},{"id":"085301bd6951b0fe","type":"ui-button","z":"4dd5d4a3ab3afca3","group":"62ed257e7cd10895","name":"","label":"sunroom humi","order":2,"width":"1","height":"1","emulateClick":true,"tooltip":"","color":"","bgcolor":"","className":"","icon":" mdiThermometer","iconPosition":"left","payload":"[{\"x\":1720147676000,\"y\":51},{\"x\":1720147709000,\"y\":67},{\"x\":1720147709000,\"y\":75},{\"x\":1720147741000,\"y\":68}]","payloadType":"json","topic":"sunroom humidity","topicType":"str","x":340,"y":240,"wires":[["a9cd327f8b3a7841"]]},{"id":"6ee3d6ae3faf5525","type":"ui-button","z":"4dd5d4a3ab3afca3","group":"62ed257e7cd10895","name":"","label":"Clear Chart","order":1,"width":"1","height":"1","emulateClick":true,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"[]","payloadType":"json","topic":"topic","topicType":"msg","x":330,"y":160,"wires":[["a9cd327f8b3a7841"]]},{"id":"62ed257e7cd10895","type":"ui-group","name":"Chart","page":"cd1479b25303c569","width":"12","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"cd1479b25303c569","type":"ui-page","name":"DB2-demos","ui":"8406fe27a9f7fb0c","path":"/all-test","icon":"home","layout":"grid","theme":"f6a83c6d9580e8ea","order":1,"className":"","visible":"true","disabled":"false"},{"id":"8406fe27a9f7fb0c","type":"ui-base","name":"DB2","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control","ui-form","ui-text-input","ui-file-input","ui-button","ui-button-group","ui-dropdown","ui-radio-group","ui-slider","ui-switch","ui-text","ui-table","ui-template","ui-markdown","ui-gauge"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"default","titleBarStyle":"default"},{"id":"f6a83c6d9580e8ea","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094CE","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

Screenshot 2024-07-07 at 6.00.12 AM
Screenshot 2024-07-07 at 6.00.12 AM1000×581 39.4 KB

3

The primary reason we have modified the way Chart's work in D2.0 is to reduce the amount of codinf required. Ideally to zero.

Our Key Mapping feature means that you shouldn’t need to modify your incoming data at all in most circumstances

4

Just to provide a cleaner (Dashboard 2.0) approach to this, no need to have multiple arrays/structures:

var i = 0;
var data = []

while (i < 360) {
    data.push({
        label: i,
        "Axe X": msg.payload.data.x_axis.axis_data[(i)],
        "Axe Y": msg.payload.data.y_axis.axis_data[(i)],
        "Axe Z": msg.payload.data.z_axis.axis_data[(i)],
    })
    i++;
}
msg.payload = data
return msg;

Then, on the ui-chart node, define the x key as label, then the "Series" property can be "JSON", and you can provide an array of strings here ["Axe X", "Axe Y", "Axe Z"], then it will draw the three lines for you

5

@joepavitt This is a much better example than the one in the docs in this section

Alternatively, you can set the series property to type JSON, and then provide an array of keys > (e.g. ["key1", "key2"]), which will plot a data point for each key provided, from a single data point. For example:

Please consider changing the example for something like this.

6

I shall make it so

7

hello joepavitt,
thank you very much for taking the time to answer my request. actually I'm having a hard time with it and it's annoying me.
Your UX challenge are functional examples of this type with a view of the rendering. It would be fantastic to have an "example" section in which we could have such use cases and methods.
This allows novices like me to understand more quickly.

Thank you again, it’s very much appreciated.

8

Just to update this, i got a bit carried away and completely overhauled the documentation, and have added support for a few new chart types in the process: UI Chart - Refine data accumulation to be chart type independent & add stacked/grouped bar charts by joepavitt · Pull Request #1086 · FlowFuse/node-red-dashboard · GitHub

1 Like
9

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