Create a graph from data

Dashboard
1

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

2

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

3

Yeah, dt column is dates @zenofmud

4

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

5

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

6

@Andrei Can you please help me out?

7

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

8

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

image
image465Ă—652 19.6 KB

Have a read of this thread - I visually explained this process for someone else here

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"
9

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
Screenshot 2020-05-18 at 09.48.031720Ă—414 65.4 KB

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

[
   {
       "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.

[{"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
Screenshot 2020-05-18 at 09.50.011230Ă—740 45.7 KB

10

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
n1

should i change anything in line chart properties
n3

11

well i'm not certain how you calculated those epochs

image
image734Ă—286 7.1 KB

12

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?

13

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

14

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

15

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

1 Like
16

The label for the first data point should be its date
n4
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

17

Thank you, I try it now

18

And you don't have to insert epoch:

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

19

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 :tongue: )

20

Thank you it works