Creating bar chart from a csv file shows nothing :(

[Gitsaibot]

Hello, I would like to display a value as a bar in a bar chart every 15 minutes. The period is 24 hours.
Like this:

Here is my flow and the debug output from "msg.generate"

The data looks okay to me. What is still missing so that it is displayed in the bar chart?
I get no scaling on the x axis can this be due to the time format?

[jbudd]

Please post some actual data and your function and chart nodes as code rather than pictures.

[E1cid]

The bar chart takes an array of values in the data array, and the times would be an array in the label property

node-red/node-red-dashboard/blob/master/Charts.md

[Gitsaibot]

Csv looks like:

Datum/Uhrzeit;Verbrauchswert;
00:00;0,000;
00:15;0,000;
...
12:15;46,000;

Here is my generate graph node:

function toTimestamp(strDate){
     var datum = Date.parse(strDate);
     return datum/1000;
    }
var payload=msg.payload;


var data_out=[];
var a1=[];
var label_out=[];
var a2=[];
for(let i=0;i<payload.length;i++)
{
  
//var Data= "2022-03-9".split("-");
//var t=Data[2]+"/"+Data[1]+"/"+Data[0];
//var timestamp= toTimestamp(t+" "+payload[i]["Datum/Uhrzeit"]);
var timestamp= (payload[i]["Datum/Uhrzeit"])


var temp1={ "x": timestamp, "y":parseInt( payload[i]["Verbrauchswert"]) };
//var temp2={ "x": timestamp };
a1.push(temp1);
//a2.push(temp2);
 //

}
//label_out=[a2];
data_out=[a1];
msg.payload=[{
"series": ["Test"],
"data":data_out,
"labels":["Test"]
}];

return msg;

@E1cid I loaded the timestamp(00:00, 00:15, 00:30 etc) into the label array but still nothing was displayed in the chart.

[E1cid]

You are still creating an array of objects, not an array of values. There where examples of how a bar chart array should look in the link I provided.

[{"id":"eb353f29.727eb8","type":"inject","z":"bf9e1e33.030598","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":160,"y":80,"wires":[["fb015cdd.41dc18"]]},{"id":"fb015cdd.41dc18","type":"template","z":"bf9e1e33.030598","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"00:00;0,000;\n00:15;2,000;\n00:30;4,000;\n00:45;5,000;\n01:00;4,000;\n01:15;3,000;\n01:30;0,000;\n","output":"str","x":270,"y":100,"wires":[["80feb1c5.91d6f"]]},{"id":"80feb1c5.91d6f","type":"csv","z":"bf9e1e33.030598","name":"","sep":";","hdrin":"","hdrout":"none","multi":"mult","ret":"\\n","temp":"","skip":"0","strings":true,"include_empty_strings":"","include_null_values":"","x":410,"y":100,"wires":[["096d0b59bafc40bb"]]},{"id":"096d0b59bafc40bb","type":"function","z":"bf9e1e33.030598","name":"Werte","func":"let payload=msg.payload;\nlet labels= [];\nlet data = [];\nfor(let i=0;i<payload.length;i++){\n    data.push(parseInt( payload[i].col2));\n    labels.push(payload[i].col1);\n}\nmsg.payload=[{\n\"series\": [],\n\"data\":[data],\n\"labels\":labels\n}];\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":560,"y":100,"wires":[["cd26d599.ceb17","5604943f.63d1d4"]]},{"id":"cd26d599.ceb17","type":"debug","z":"bf9e1e33.030598","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":690,"y":40,"wires":[]},{"id":"5604943f.63d1d4","type":"ui_chart","z":"bf9e1e33.030598","name":"","group":"2d4fe667.28f8ba","order":24,"width":0,"height":0,"label":"chart","chartType":"bar","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":true,"useUTC":false,"colors":["#d73920","#ffcb13","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"className":"","x":570,"y":140,"wires":[[]]},{"id":"2d4fe667.28f8ba","type":"ui_group","name":"demo","tab":"1caa8458.b17814","order":1,"disp":true,"width":"12","collapse":false},{"id":"1caa8458.b17814","type":"ui_tab","name":"Demo","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

[Gitsaibot]

Thank you for the example. It helped me a lot. Now the bar chart looks like it should. Is there actually a simple way to label the y-axis?