Hi all i am a newbie 
This should be an easy one lol..
I am having trouble extracting the following data in the picture.
I want to plot this data into a graph.
The blue being the date and time, and in red is the value.
Please help.
Welcome to the forum jhdgkss 
This https://github.com/node-red/node-red-dashboard/blob/master/Charts.md#stored-data describes the format that you need to pass to the Chart node.
You can do it in a Function node something like this
let labels = [];
let data = [];
msg.payload = msg.payload.results[0].series;
msg.payload.forEach(myFunction);
function myFunction(item, index) {
data.push(item.values[1]);
labels.push(item.values[0]);
}
msg.payload = [{
"series": ["Chart Title"],
"data": [data],
"labels": labels
}];
return msg;
1 Like
Hi thank you for your help it's much appreciated.
I implemented the code you posted. please see the attached image.
unfortunately, the data is not showing, but the graph is formated.
My project is to select specific data between a set time frame from infuxdb and display that data on a graph or do other such work with it.
It looks like you only sent a single data point.
Please post an actual example of your data.
Display the data with a debug node and copy it's value using the button at the right.
Here's how one of my mesages looks as an example:
Edit: does your array only contain one data point, which you are charting live? One data point per so many seconds?
If that's so you don't need the function, it can be done with a change node.
Post the data and we'll sort it out.
1 Like
Hello first off thank you so much for your help.
Here is the copied data as requested.
[{"series":["Chart Title"],"data":[[["2021-09-28T08:34:01.120229573Z",0]]],"labels":[["2021-09-28T08:33:01.000334349Z",0]]}]
And yes there is one data point that is sent to a time-series database (influx) every minute.
As you can see in the data there is a time/date stamp (2021-09-28T08:33:01.000334349Z) followed by the data point (0).
It is important that the data point is displayed with the same date/time stamp on the graph.
The reason is I am querying the database between a set time/date frame.
I also need to get this data into a basic array so i can do further analysis of the information.
Thank you again John.
here is a copy of the original data from the database if that help.
I'm not sure that we understand each other.
There are two ways to construct a chart.
- You feed each individual value to the chart as you receive it. The chart plots that data point against the current time.
- You retrieve a number of timestamps and values from a database and feed them into the chart all at once (in a format that the chart can recognise)
I think you are trying to use the second approach.
You have not posted the data which your db query returns so I don't know if it contains a single data point or many,
The data you did post, which you are feeding to the chart, only contains a single point, which will not result in a very satisfactory graph. And it's in the wrong format.
Edit - deleted my own misleading sample data
If you post a sample of the data as you get it from the database we can help you to format it for the chart.
If displaying time series data would one not normally use the format
[{
"series": ["A", "B", "C"],
"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 }
],
[{ "x": 1504029634400, "y": 7 },
{ "x": 1504029637959, "y": 7 },
{ "x": 1504029640317, "y": 7 }
]
],
"labels": [""]
}]
or with just one line
[{
"series": ["A"],
"data": [
[{ "x": 1504029632890, "y": 5 },
{ "x": 1504029636001, "y": 4 },
{ "x": 1504029638656, "y": 2 }
] ]
],
"labels": [""]
}]
which I suspect is what @jhdgkss is aiming for.
1 Like
Yes, I'm sure you are right! Now I'm wondering why my charts work at all. 
Hi again.
Yes i am looking at the second approach but with the option of putting a second function between the reformated data and the graph to do extra data. But this is further down the line.
Here is my data straight from the influxdb get request that i am trying to format.
{"results":[{"statement_id":0,"series":[{"name":"SN0002_EPM","columns":["time","value"],"values":[["2021-09-28T09:59:00.859512711Z",0],["2021-09-28T10:00:01.039554904Z",0],["2021-09-28T10:01:00.15964071Z",0],["2021-09-28T10:02:00.371930097Z",0],["2021-09-28T10:03:00.458902681Z",0],["2021-09-28T10:04:00.596577388Z",0],["2021-09-28T10:05:00.740338762Z",0],["2021-09-28T10:06:00.976273813Z",0],["2021-09-28T10:06:36.864983764Z",0],["2021-09-28T10:07:00.904672348Z",0],["2021-09-28T10:08:00.100793014Z",0],["2021-09-28T10:09:00.209308785Z",0],["2021-09-28T10:10:00.318047164Z",0],["2021-09-28T10:11:00.432648335Z",0],["2021-09-28T10:12:00.545152705Z",0],["2021-09-28T10:13:00.68670558Z",0]]}]}]}
As you can see i am only ploting one data point ["2021-09-28T10:13:00.68670558Z",0]
To me, the time stamp does look to be in the right format as you mentioned but is followed by the data value separated by a comma.
It would be good to be able to get this information into a basic table format first so additional data can be extracted from it? But that is for later on.
Here also is my flow.
Hi yes, that looks about right.
But my problem is getting it into that format.
While I do know how to program in a language such as python i am totally new to node-red and I am trying to learn the differences
What sort of chart are you after - a bar chart or a line chart?
Why only one point, is it supposed to show just the most recent record in the database?
I suspect that @jhdgkss means that his attempt so far only produces the structure shown and is not correctly including all the data.
Yes, maybe I misinterpreted "As you can see i am only plotting one data point"
Here is a line chart using the data you supplied. It's not very exciting, all the values are zero.
[{"id":"b0461ce72e8b954a","type":"inject","z":"7fa7266f878522cd","name":"Go","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payloadType":"date","x":110,"y":120,"wires":[["5e3849590a4990ee"]]},{"id":"5e3849590a4990ee","type":"function","z":"7fa7266f878522cd","name":"Sample data","func":"msg.payload = {\"results\":[{\"statement_id\":0,\"series\":[{\"name\":\"SN0002_EPM\",\"columns\":[\"time\",\"value\"],\"values\":[[\"2021-09-28T09:59:00.859512711Z\",0],[\"2021-09-28T10:00:01.039554904Z\",0],[\"2021-09-28T10:01:00.15964071Z\",0],[\"2021-09-28T10:02:00.371930097Z\",0],[\"2021-09-28T10:03:00.458902681Z\",0],[\"2021-09-28T10:04:00.596577388Z\",0],[\"2021-09-28T10:05:00.740338762Z\",0],[\"2021-09-28T10:06:00.976273813Z\",0],[\"2021-09-28T10:06:36.864983764Z\",0],[\"2021-09-28T10:07:00.904672348Z\",0],[\"2021-09-28T10:08:00.100793014Z\",0],[\"2021-09-28T10:09:00.209308785Z\",0],[\"2021-09-28T10:10:00.318047164Z\",0],[\"2021-09-28T10:11:00.432648335Z\",0],[\"2021-09-28T10:12:00.545152705Z\",0],[\"2021-09-28T10:13:00.68670558Z\",0]]}]}]}\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":250,"y":120,"wires":[["464b89bf1683b407"]]},{"id":"464b89bf1683b407","type":"function","z":"7fa7266f878522cd","name":"Format for chart","func":"let labels = [];\nlet data = [];\n\nmsg.payload = msg.payload.results[0].series[0].values;\nmsg.payload.forEach(myFunction);\n\nfunction myFunction(item, index) { \n timestamp=item[0];\n value=item[1];\n foo={\"x\": timestamp, \"y\": value }\n data.push(foo); \n}\n\nmsg.payload = [{\n \"series\": [\"My Data\"],\n \"data\": [data],\n \"labels\": labels\n}];\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":520,"y":120,"wires":[["7f951b84563b1f26"]]},{"id":"7f951b84563b1f26","type":"ui_chart","z":"7fa7266f878522cd","name":"","group":"3ce32370.c60f1c","order":0,"width":0,"height":0,"label":"Time Series Data","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":true,"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":710,"y":120,"wires":[[]]},{"id":"3ce32370.c60f1c","type":"ui_group","name":"Demo","tab":"d74bbed4.c2cfb","order":2,"disp":false,"width":"6","collapse":false,"className":""},{"id":"d74bbed4.c2cfb","type":"ui_tab","name":"Demo","icon":"dashboard","order":4,"disabled":false,"hidden":false}]
1 Like
Hi again. Thank you that's perfect.
This should also give me a small foundation to move forward with other things i want to do.
Thank you all.
Hi one last thing.... Sorry..
Can you explain how the Format for chart code works??
Just for my better understanding.
let labels = ;
let data = ;
msg.payload = msg.payload.results[0].series[0].values;
msg.payload.forEach(myFunction);
function myFunction(item, index) {
timestamp=item[0];
value=item[1];
foo={"x": timestamp, "y": value }
data.push(foo);
}
msg.payload = [{
"series": ["Chart Title"],
"data": [data],
"labels": labels
}];
return msg;
Thank you
Not really, I just copied someone else's code.
Firstly I declare variables "labels" and "data" as empty arrays.
The data that you want to plot happens to be in msg.payload.results[0].series[0].values and it is an array.
forEach() loops through the array, each time putting the current value into "item" and passing it to myFunction().
In this case "item" also happens to be an array with timestamp in item[0] and value in item[1]
I format it into a Javascript object "foo" and add (push) that to another array "data".
Finally it creates an array in msg.payload. For this graph the array only has one element, a javascript object with the properties "series", "data" and "labels".
"Chart Title" was a bad choice for series. It should describe the data, so "Temperature" or "rpm" would be better.
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
