2d Array into graph

Hi, I'm having some difficulty with getting my chart to show the data I get into a non-time series Line Chart
I got as far as almost getting the format correct but I had stopped the project for a few months and got back to the code and Can't remember what I have done and where even have got the Code Snippets from.

So for example in the Sample data, same as I get from the Device is an Intensity(y) and a Wavelength(x) value that I want to put onto a chart that it is easy to spot any high/low points in the data.

I'd appreciate it if someone could have a look at the code and Possibly point out what I have done wrong?
I know the format is near to what It should be, Or so I assume.

flows (3).json (22.4 KB)

The final payload has to be an array and to feed stored data you need to add a a time, I simulated this by using the count in the loop and timesing by 60 so all data is 60 seconds apart, you can edit and change if you wish.
The data sets has to be an array of objects in this form

[{
"series": ["A", "B"],
"data": [
    [{ "x": 1504029632890, "y": 5 },
     { "x": 1504029636001, "y": 4 },
     { "x": 1504029638656, "y": 2 }
    ],
    [{ "x": 1504029633514, "y": 6 },
     { "x": 1504029636622, "y": 7 },
     { "x": 1504029639539, "y": 6 }
    ]
],
"labels": [""]
}]

here is an example of the function

[{"id":"a14ba8c4.e546c8","type":"function","z":"b779de97.b1b46","name":"","func":"//1. lets create a variable to hold the finished article...\nlet chartData = [];  //See #1 - create an empty array\n\n//2. lets create a variable to hold the everything...\nlet element1 = {};  //create element1 as an empty object {}\n\n//3, now add the .property \"series\" to the element1 {object}\nelement1.series = []; // add a .property called series of type [array]\nelement1.series.push(\"Intensity\");\nelement1.series.push(\"Wavelength\");//add 1st array element \"A\"\n\n\n//4. now add the .property \"data\" to the element1 {object}\nelement1.data = [[],[]]; // add a .property called data of type [array]\n\n\n\n/*********** NEXT - ADDING DATA  ***************************\n  NORMALLY, ADDING DATA WOULD BE DYNAMIC \n  PERHAPS LOOPING THROUGH AN ARRAY\n  THIS EXAMPLE SHOWS ADDING HARD CODED VALUES\n************************************************************/\n//4b. now we add 3 arrays to the data [array]\n\n//4c. now add the 3 {objects} inside each of the dataElements\nconst data = msg.payload\nfor(let x = 0; x < data.length; x++){\n  \n    element1.data[0][x] = {x: x*60, y: data[x][0]}\n    element1.data[1][x] = {x: x*60, y: data[x][1]}\n}\n\n//5. now add a labels [array] to element1\nelement1.labels = [\"\"]; // add a .property called labels of type [array]\n\n//Lastly, return the chartData as the payload \nmsg.payload = [element1];\nreturn msg;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","x":175,"y":980,"wires":[["c45068de.10c3e8"]],"l":false}]

Output

And then also set the x-axis format like this
image

1 Like

so you are plotting Intensity(y) by Wavelength(x) ? so basically its 1 series

[{"id":"8019ec2f1a59377b","type":"function","z":"4895ea10b4ee9ead","name":"","func":"// [{\n//     \"series\": [\"A\", \"B\", \"C\"],\n//     \"data\": [\n//         [{ \"x\": 1504029632890, \"y\": 5 },\n//         { \"x\": 1504029636001, \"y\": 4 },\n//         { \"x\": 1504029638656, \"y\": 2 }\n//         ],\n//         [{ \"x\": 1504029633514, \"y\": 6 },\n//         { \"x\": 1504029636622, \"y\": 7 },\n//         { \"x\": 1504029639539, \"y\": 6 }\n//         ],\n//         [{ \"x\": 1504029634400, \"y\": 7 },\n//         { \"x\": 1504029637959, \"y\": 7 },\n//         { \"x\": 1504029640317, \"y\": 7 }\n//         ]\n//     ],\n//     \"labels\": [\"\"]\n// }]\n\nlet data = []\nmsg.payload = msg.payload.forEach(el => {\n\n    data.push({ \"x\": el[0], \"y\": el[1] })\n\n})\n\nlet chartData = [{\n    series: [\"Wavelength\"],\n    data: [data],\n    labels: [\"\"]\n}]\n\nmsg.payload = chartData;\n\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":340,"y":920,"wires":[["c45068de.10c3e8","9a245700.081d68"]]}]

ps. the documentation regarding the structure of data for the ui_chart can be found here

1 Like

Thanks!
This is exactly what I wanted.

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