# Create a graph from data

**URL:** <https://discourse.nodered.org/t/create-a-graph-from-data/26821>\
**Category:** Dashboard\
**Created:** [17 May 2020 19:02 UTC](https://discourse.nodered.org/t/create-a-graph-from-data/26821 "2020-05-17T19:02:23Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![noob96](https://avatars.discourse-cdn.com/v4/letter/n/82dd89/32.png) [@noob96](https://discourse.nodered.org/u/noob96)\
**Post date:** [17 May 2020 19:02 UTC](https://discourse.nodered.org/t/create-a-graph-from-data/26821/1 "2020-05-17T19:02:24Z")

</div>

How do I create a chart from a csv file, the x axis should be dt column and y axis should be AverageTemperature column.

Here is the sample data from the csv file

dt,value

1865-01-01,25  
1865-02-01,23  
1865-03-01,27  
....

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [17 May 2020 20:19 UTC](https://discourse.nodered.org/t/create-a-graph-from-data/26821/2 "2020-05-17T20:19:04Z")

</div>

Just to be clear, is the `dt` column dates? So the first row is January 1st 1865?

---

<div class="post-metadata">

**Author:** ![noob96](https://avatars.discourse-cdn.com/v4/letter/n/82dd89/32.png) [@noob96](https://discourse.nodered.org/u/noob96)\
**Post date:** [17 May 2020 22:58 UTC](https://discourse.nodered.org/t/create-a-graph-from-data/26821/3 "2020-05-17T22:58:17Z")

</div>

Yeah, dt column is dates @zenofmud

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [17 May 2020 23:06 UTC](https://discourse.nodered.org/t/create-a-graph-from-data/26821/4 "2020-05-17T23:06:55Z")

</div>

You should take a read of this [https://github.com/node-red/node-red-dashboard/blob/master/Charts.md#stored-data](https://github.com/node-red/node-red-dashboard/blob/master/Charts.md#stored-data)

---

<div class="post-metadata">

**Author:** ![noob96](https://avatars.discourse-cdn.com/v4/letter/n/82dd89/32.png) [@noob96](https://discourse.nodered.org/u/noob96)\
**Post date:** [18 May 2020 06:46 UTC](https://discourse.nodered.org/t/create-a-graph-from-data/26821/5 "2020-05-18T06:46:47Z")

</div>

@zenofmud But how do I specify to use the dt column containing date to be used as x axis?

---

<div class="post-metadata">

**Author:** ![noob96](https://avatars.discourse-cdn.com/v4/letter/n/82dd89/32.png) [@noob96](https://discourse.nodered.org/u/noob96)\
**Post date:** [18 May 2020 06:47 UTC](https://discourse.nodered.org/t/create-a-graph-from-data/26821/6 "2020-05-18T06:47:25Z")

</div>

@Andrei Can you please help me out?

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [18 May 2020 07:00 UTC](https://discourse.nodered.org/t/create-a-graph-from-data/26821/7 "2020-05-18T07:00:36Z")

</div>

Did you read the section on stored data? You need to format your data as it shows, therefore you will need to change the dates into milliseconds

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [18 May 2020 07:38 UTC](https://discourse.nodered.org/t/create-a-graph-from-data/26821/8 "2020-05-18T07:38:01Z")

</div>

Hi @noob96 What @zenofmud is saying (in visual terms) is...

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/9/19ee517de8c52d7b27d9ea9cae198a58678e910d.png)

Have a read of this thread - I visually explained this process for someone else [here](https://discourse.nodered.org/t/manipulate-vector-for-dashboard-chart-node/25298/3)

some clues...

- for changing time string to Date number (epoch), this can be done in JS - search the internet for "javascript date string to epoch"
- for changing a string number to actual number - search for "javascript `parseInt`"

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [18 May 2020 07:49 UTC](https://discourse.nodered.org/t/create-a-graph-from-data/26821/9 "2020-05-18T07:49:24Z")

</div>

The chart input layout is a bit convoluted but this example might help you on your way.

 ![Screenshot 2020-05-18 at 09.48.03](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/0/c09c1e74aaaf638628c716c9dd9a1cb3efa2fe90.jpeg)

In the change node you can reformat the csv array with jsonata like this:

```auto
[
   {
       "labels":[""],
       "series":["avgTemp"],
       "data": [
           [
               $map(
                   payload.col1,
                   function($v, $i, $a) {
                       {
                           'x': $v,
                           'y':payload[$i].col2 
                }  
            }
            )    
        ]
       ]
   }
]

```

Example flow, change the input file to your own.

```auto
[{"id":"907cdda1.572108","type":"inject","z":"eb03e9b6.874b98","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":156,"y":600,"wires":[["93224ee6.01a31"]]},{"id":"93224ee6.01a31","type":"file in","z":"eb03e9b6.874b98","name":"input file","filename":"/home/administrator/input.csv","format":"utf8","chunk":false,"sendError":false,"encoding":"none","x":300,"y":600,"wires":[["18e0237d.190ead"]]},{"id":"18e0237d.190ead","type":"csv","z":"eb03e9b6.874b98","name":"","sep":",","hdrin":"","hdrout":"","multi":"mult","ret":"\\n","temp":"","skip":"1","strings":true,"x":434,"y":600,"wires":[["b483c0d9.45e35"]]},{"id":"de8f8a17.0366e","type":"debug","z":"eb03e9b6.874b98","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":790,"y":552,"wires":[]},{"id":"b483c0d9.45e35","type":"change","z":"eb03e9b6.874b98","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"[\t {\t \"labels\":[\"\"],\t \"series\":[\"avgTemp\"],\t \"data\": [[\t $map(\t payload.col1,\t function($v, $i, $a) {\t {\t 'x': $v,\t 'y':payload[$i].col2 \t } \t }\t ) \t ]]}\t]\t","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":584,"y":600,"wires":[["de8f8a17.0366e","54a1aab.9bdf654"]]},{"id":"54a1aab.9bdf654","type":"ui_chart","z":"eb03e9b6.874b98","name":"","group":"fbe55673.66dd98","order":1,"width":0,"height":0,"label":"test","chartType":"line","legend":"false","xformat":"Y-M-D","interpolate":"cubic","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"86400","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":770,"y":648,"wires":[[]]},{"id":"fbe55673.66dd98","type":"ui_group","name":"Group 1","tab":"3a6d7b89.06bd5c","order":1,"disp":true,"width":13},{"id":"3a6d7b89.06bd5c","type":"ui_tab","name":"Tab 6","icon":"dashboard","order":6}]

```

Chart output

 ![Screenshot 2020-05-18 at 09.50.01](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/0/a01d0d8f4b341974529c4de66021eb7c641c1473.jpeg)

---

<div class="post-metadata">

**Author:** ![noob96](https://avatars.discourse-cdn.com/v4/letter/n/82dd89/32.png) [@noob96](https://discourse.nodered.org/u/noob96)\
**Post date:** [18 May 2020 07:51 UTC](https://discourse.nodered.org/t/create-a-graph-from-data/26821/10 "2020-05-18T07:51:01Z")

</div>

Hi @Steve-Mcl, I appreciate your help. To test, I converted 3 dates, [1865-Jan-01, 1865-Feb-01, 1865-Mar-01] to timestamp and try to get the chart. But the chart the doesn't the exact date when plotting the points  
 ![n2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/b/7b5dd53fe63393845a570595f969e5c5aca6e5b6.png)  
 ![n1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/5/15ffcf8d1daafd8cd9818bf06464fe32f551b149.png)

should i change anything in line chart properties  
 ![n3](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/9/39034724e8abb8688cd5ff8275256cde17a3f296.png)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [18 May 2020 08:04 UTC](https://discourse.nodered.org/t/create-a-graph-from-data/26821/11 "2020-05-18T08:04:53Z")

</div>

well i'm not certain how you calculated those epochs

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/2/f290a52268141d5ed92fb8de65ab2eec23613198.png)

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [18 May 2020 08:10 UTC](https://discourse.nodered.org/t/create-a-graph-from-data/26821/12 "2020-05-18T08:10:40Z")

</div>

The chart looks correct to me. Is it that the x axis annotation is at 29th Dec and 6th March, but you would prefer the end points on the axis to be exactly the end points that you fed in, rather than having a bit of a gap at each end?

---

<div class="post-metadata">

**Author:** ![noob96](https://avatars.discourse-cdn.com/v4/letter/n/82dd89/32.png) [@noob96](https://discourse.nodered.org/u/noob96)\
**Post date:** [18 May 2020 08:13 UTC](https://discourse.nodered.org/t/create-a-graph-from-data/26821/13 "2020-05-18T08:13:40Z")

</div>

Oh..my mistake. Let me try with the correct epochs

---

<div class="post-metadata">

**Author:** ![noob96](https://avatars.discourse-cdn.com/v4/letter/n/82dd89/32.png) [@noob96](https://discourse.nodered.org/u/noob96)\
**Post date:** [18 May 2020 08:16 UTC](https://discourse.nodered.org/t/create-a-graph-from-data/26821/14 "2020-05-18T08:16:37Z")

</div>

I want to show each data point with its associated date present in the x axis

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [18 May 2020 08:21 UTC](https://discourse.nodered.org/t/create-a-graph-from-data/26821/15 "2020-05-18T08:21:42Z")

</div>

I have provided a flow that works, you can set your own input file.

---

<div class="post-metadata">

**Author:** ![noob96](https://avatars.discourse-cdn.com/v4/letter/n/82dd89/32.png) [@noob96](https://discourse.nodered.org/u/noob96)\
**Post date:** [18 May 2020 08:22 UTC](https://discourse.nodered.org/t/create-a-graph-from-data/26821/16 "2020-05-18T08:22:40Z")

</div>

The label for the first data point should be its date  
 ![n4](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/2/e216c6ca5e2c46684190c066346c6cbe18c5b7df.png)  
which should 1865-Jan-1.

@Steve-Mcl I corrected the epochs but still I'm not getting the x axis data as the date of the indivdual datapoints

---

<div class="post-metadata">

**Author:** ![noob96](https://avatars.discourse-cdn.com/v4/letter/n/82dd89/32.png) [@noob96](https://discourse.nodered.org/u/noob96)\
**Post date:** [18 May 2020 08:24 UTC](https://discourse.nodered.org/t/create-a-graph-from-data/26821/17 "2020-05-18T08:24:02Z")

</div>

Thank you, I try it now

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [18 May 2020 08:24 UTC](https://discourse.nodered.org/t/create-a-graph-from-data/26821/18 "2020-05-18T08:24:08Z")

</div>

And you don't have to insert epoch:

> This must be in either epoch time (in miliseconds, not seconds), **or ISO8601 format**.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [18 May 2020 08:25 UTC](https://discourse.nodered.org/t/create-a-graph-from-data/26821/19 "2020-05-18T08:25:17Z")

</div>

paste your flow (not a screen shot - they look great but node-red is rubbish at importing images & I aint writing your code out manually 👅 )

---

<div class="post-metadata">

**Author:** ![noob96](https://avatars.discourse-cdn.com/v4/letter/n/82dd89/32.png) [@noob96](https://discourse.nodered.org/u/noob96)\
**Post date:** [18 May 2020 08:46 UTC](https://discourse.nodered.org/t/create-a-graph-from-data/26821/20 "2020-05-18T08:46:22Z")

</div>

Thank you it works

[Next page](https://discourse.nodered.org/t/create-a-graph-from-data/26821.md?page=2)