# Creating bar chart from a csv file shows nothing :(

**URL:** <https://discourse.nodered.org/t/creating-bar-chart-from-a-csv-file-shows-nothing/59608>\
**Category:** Dashboard\
**Created:** [9 March 2022 18:07 UTC](https://discourse.nodered.org/t/creating-bar-chart-from-a-csv-file-shows-nothing/59608 "2022-03-09T18:07:26Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Gitsaibot](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gitsaibot/32/58008_2.png) [@Gitsaibot](https://discourse.nodered.org/u/Gitsaibot)\
**Post date:** [9 March 2022 18:07 UTC](https://discourse.nodered.org/t/creating-bar-chart-from-a-csv-file-shows-nothing/59608/1 "2022-03-09T18:07:26Z")

</div>

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:

 ![Stat](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/5/65a55315557fc99f7cc35b919386737aa91516c0.png)

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

 ![Flow](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/2/92ba2c512fc2a44ed747d5135201dcd78b85ab94.png)

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?

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [9 March 2022 18:43 UTC](https://discourse.nodered.org/t/creating-bar-chart-from-a-csv-file-shows-nothing/59608/2 "2022-03-09T18:43:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [9 March 2022 18:47 UTC](https://discourse.nodered.org/t/creating-bar-chart-from-a-csv-file-shows-nothing/59608/3 "2022-03-09T18:47:00Z")

</div>

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

> <https://github.com/node-red/node-red-dashboard/blob/master/Charts.md>

---

<div class="post-metadata">

**Author:** ![Gitsaibot](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gitsaibot/32/58008_2.png) [@Gitsaibot](https://discourse.nodered.org/u/Gitsaibot)\
**Post date:** [9 March 2022 21:14 UTC](https://discourse.nodered.org/t/creating-bar-chart-from-a-csv-file-shows-nothing/59608/4 "2022-03-09T21:14:46Z")

</div>

Csv looks like:

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

```

Here is my generate graph node:

```auto
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.

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [9 March 2022 22:00 UTC](https://discourse.nodered.org/t/creating-bar-chart-from-a-csv-file-shows-nothing/59608/5 "2022-03-09T22:00:02Z")

</div>

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.

```auto
[{"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}]

```

---

<div class="post-metadata">

**Author:** ![Gitsaibot](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gitsaibot/32/58008_2.png) [@Gitsaibot](https://discourse.nodered.org/u/Gitsaibot)\
**Post date:** [10 March 2022 21:18 UTC](https://discourse.nodered.org/t/creating-bar-chart-from-a-csv-file-shows-nothing/59608/6 "2022-03-10T21:18:45Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [25 March 2022 09:37 UTC](https://discourse.nodered.org/t/creating-bar-chart-from-a-csv-file-shows-nothing/59608/8 "2022-03-25T09:37:36Z")

</div>

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