# Drawing a chart in node red dashboard using csv file

**URL:** <https://discourse.nodered.org/t/drawing-a-chart-in-node-red-dashboard-using-csv-file/64291>\
**Category:** Dashboard\
**Created:** [23 June 2022 15:11 UTC](https://discourse.nodered.org/t/drawing-a-chart-in-node-red-dashboard-using-csv-file/64291 "2022-06-23T15:11:51Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![OmarShazlyXX](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/omarshazlyxx/32/63703_2.png) [@OmarShazlyXX](https://discourse.nodered.org/u/OmarShazlyXX)\
**Post date:** [23 June 2022 15:11 UTC](https://discourse.nodered.org/t/drawing-a-chart-in-node-red-dashboard-using-csv-file/64291/1 "2022-06-23T15:11:51Z")

</div>

I'm trying to display a line chart in the dashboard from a csv file, this chart shows the change of the compressor's power(y-axis) with time(x-axis), i saw some videos showing that i must convert the time to unix format before passing it to the chart, and i did this and saw the output from the debug node and it shows that the date is converted but the chart in the dashboard doesn't seem to work nonetheless, here are the photos for the flow and chart  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/6/66c9431e9e5df532f055a267b03c5abde3298fc2.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/d/2da435db38a055bd8acd3e40e564819d4c5d95dd.png)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/a/1a5c6b5c02fc8ce7ccaff11b0fc95b3df51668c8.jpeg)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/f/4f3a8722eee840f7b76e9a9e24f2e16abea88322.jpeg)

---

<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:** [23 June 2022 16:31 UTC](https://discourse.nodered.org/t/drawing-a-chart-in-node-red-dashboard-using-csv-file/64291/2 "2022-06-23T16:31:01Z")

</div>

Almost there, not sure what your code is as image is not really helpful, as hard to read and edit.  
try

```auto
data: [data_out],

```

As data should be an array holding arrays of objects for all series.

---

<div class="post-metadata">

**Author:** ![OmarShazlyXX](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/omarshazlyxx/32/63703_2.png) [@OmarShazlyXX](https://discourse.nodered.org/u/OmarShazlyXX)\
**Post date:** [23 June 2022 18:19 UTC](https://discourse.nodered.org/t/drawing-a-chart-in-node-red-dashboard-using-csv-file/64291/3 "2022-06-23T18:19:56Z")

</div>

Thanks that actually worked, but now there's a small issue. the X-axis isnt showing the time correctly, as it's showing time intervals of 15 seconds instead of 15 minutes.  
i will leave you the code, a picture of the chart, and a sample of the csv values.

 ![Capture 5](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/c/cc6ef9cee3fc67afc4efb13e6e3339c7994f0ae3.jpeg)

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

var payload=msg.payload;
var Data = "2022-23-6".split("-");
var Data = Data[2]+"/"+Data[1]+"/"+Data[0];
node.log(Data);
t = toTimestamp(Data + "14:30:00");
var data_out = [];

for(let i=0;i<payload.length;i++)
{
  var Data= payload[i].Data.split("-")
  var t = Data[2]+"/"+Data[1]+"/"+Data[0];
  var timestamp=toTimestamp(t+" "+payload[i]["Time"]);
  var Power = {"x": timestamp, "y":payload[i]["Compressor (KW)"] };
  data_out.push(Power);
}

msg.payload=[{
   "series": ["Compressor (KW)"],
   "data":[data_out],
   "labels": ["Compressor (KW)"]
   
}];
msg.t=t;
return msg;

```

![Capture 6](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/4/3461503c60892046ee066bbaadef6dd0e0b1fcb3.jpeg)

---

<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:** [23 June 2022 18:31 UTC](https://discourse.nodered.org/t/drawing-a-chart-in-node-red-dashboard-using-csv-file/64291/4 "2022-06-23T18:31:39Z")

</div>

Set your timestamps to Javascript timestamps in milliseconds, don't divide them by a 1000.

---

<div class="post-metadata">

**Author:** ![OmarShazlyXX](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/omarshazlyxx/32/63703_2.png) [@OmarShazlyXX](https://discourse.nodered.org/u/OmarShazlyXX)\
**Post date:** [23 June 2022 18:44 UTC](https://discourse.nodered.org/t/drawing-a-chart-in-node-red-dashboard-using-csv-file/64291/5 "2022-06-23T18:44:20Z")

</div>

yeah, that did the work, Thanks alot !

---

<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:** [7 July 2022 18:44 UTC](https://discourse.nodered.org/t/drawing-a-chart-in-node-red-dashboard-using-csv-file/64291/6 "2022-07-07T18:44:21Z")

</div>

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