Chart_ui output to table

[Andrew Wingfield]

So I have some temperature sensors and need to keep the data in a logical and readable way for about 3 years, the sensors are in vaccine fridges. Currently I have the data going into a chart that plots all the temperatures but I also want to generate a dynamic table. I tried just attaching a tableify node to the chart output but the table doesn't look as clean as I'd like. The sensor names appear in one table, then it looks like each sensor is in another table with the times being in milliseconds.

I'm looking for tips on how to either manipulate the array coming out of the chart or feed the data into tableify and make one table with human readable times, sensor names, and temperatures listed. Or, one separate table for each sensor as it might look cleaner. I can post screen shots of anything that might help, just let me know what you'd like to see. Thanks in advance, I'm new to this but find node-red pretty intuitive.

[Andrew Wingfield]

This is the long term flow that I have and attached is the picture of the top of the table generated.

[{"id":"58b01ddb.d876b4","type":"ui_chart","z":"f776c22a.15537","name":"","group":"2dfc172f.390928","order":0,"width":"0","height":"0","label":"Testing Room Temperatures","chartType":"line","legend":"true","xformat":"M/D/YY h a","interpolate":"bezier","nodata":"waiting for data","dot":true,"ymin":"","ymax":"","removeOlder":"156","removeOlderPoints":"","removeOlderUnit":"604800","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"x":927.9998893737793,"y":1018.3333368301392,"wires":[["e2d1b2a.326f95","6e11ceb7.c9bc1"],[]]},{"id":"8dc40906.5b43b8","type":"rpi-ds18b20","z":"f776c22a.15537","topic":"","array":false,"name":"","x":447.6665802001953,"y":943.0000286102295,"wires":[["2065d94f.9209c6"]]},{"id":"723b4f83.29f65","type":"inject","z":"f776c22a.15537","name":"Chris' Fridge Long","topic":"0417c1aed4ff","payload":"","payloadType":"str","repeat":"43200","crontab":"","once":true,"onceDelay":"120","x":197.4165802001953,"y":943.000036239624,"wires":[["8dc40906.5b43b8"]],"outputLabels":["msg.topic"]},{"id":"2065d94f.9209c6","type":"function","z":"f776c22a.15537","name":"Convert to F","func":"   var tempc = msg.payload;\n    tempf = tempc * 9/5 + 32;\n    tempf = Math.round(tempf * 10) / 10;\n    msg.payload = tempf;\n    msg.topic = \"Chris' Fridge\"\nreturn msg;","outputs":1,"noerr":0,"x":628.6665802001953,"y":942.0000286102295,"wires":[["58b01ddb.d876b4"]]},{"id":"6c70f37c.f46e1c","type":"rpi-ds18b20","z":"f776c22a.15537","topic":"","array":false,"name":"","x":428.6665802001953,"y":1035.0000286102295,"wires":[["a3f11f8e.5420c"]]},{"id":"4fa58402.80aaec","type":"inject","z":"f776c22a.15537","name":"Testing Ambient Long","topic":"0417c20666ff","payload":"","payloadType":"str","repeat":"43200","crontab":"","once":true,"onceDelay":"120","x":194.333251953125,"y":1036.6666707992554,"wires":[["6c70f37c.f46e1c"]],"outputLabels":["msg.topic"]},{"id":"a3f11f8e.5420c","type":"function","z":"f776c22a.15537","name":"Convert to F","func":"   var tempc = msg.payload;\n    tempf = tempc * 9/5 + 32;\n    tempf = Math.round(tempf * 10) / 10;\n    msg.payload = tempf;\n    msg.topic = \"Testing Ambient Temp\";\nreturn msg;","outputs":1,"noerr":0,"x":608.6665802001953,"y":1038.0000286102295,"wires":[["58b01ddb.d876b4"]]},{"id":"b45fc3ce.9ff1c","type":"rpi-ds18b20","z":"f776c22a.15537","topic":"","array":false,"name":"","x":422.6665802001953,"y":1115.0000286102295,"wires":[["a89ab294.7b895"]]},{"id":"a089db27.08f268","type":"inject","z":"f776c22a.15537","name":"Testing Fridge Long","topic":"0417c1e212ff","payload":"","payloadType":"str","repeat":"43200","crontab":"","once":true,"onceDelay":"120","x":186.66657257080078,"y":1115.0000476837158,"wires":[["b45fc3ce.9ff1c"]],"outputLabels":["msg.topic"]},{"id":"a89ab294.7b895","type":"function","z":"f776c22a.15537","name":"Convert to F","func":"   var tempc = msg.payload;\n    tempf = tempc * 9/5 + 32;\n    tempf = Math.round(tempf * 10) / 10;\n    msg.payload = tempf;\n    msg.topic = \"Testing Fridge\";\nreturn msg;","outputs":1,"noerr":0,"x":599.6665802001953,"y":1115.0000286102295,"wires":[["58b01ddb.d876b4"]]},{"id":"e2d77a8d.c7a958","type":"file in","z":"f776c22a.15537","name":"","filename":"/mnt/usb/TempTestLong.log","format":"utf8","sendError":true,"x":829.2499389648438,"y":813.25,"wires":[["b90bd4b3.679bb8"]]},{"id":"95ea6ca8.15e6a","type":"inject","z":"f776c22a.15537","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":true,"onceDelay":"10","x":564.7499389648438,"y":862.5,"wires":[["e2d77a8d.c7a958"]]},{"id":"e2d1b2a.326f95","type":"json","z":"f776c22a.15537","name":"","property":"payload","action":"","pretty":false,"x":1186.2499694824219,"y":1022.5000381469727,"wires":[["eb16f35b.de5c8"]]},{"id":"6e11ceb7.c9bc1","type":"tableify","z":"f776c22a.15537","name":"","before":"","after":"","tableStyle":"","theadStyle":"","tbodyStyle":"","trStyle":"","tdStyle":"","x":1120,"y":1100,"wires":[["650b0bb4.6feee4"]]},{"id":"b90bd4b3.679bb8","type":"json","z":"f776c22a.15537","name":"","x":1048.4999389648438,"y":802,"wires":[["58b01ddb.d876b4"]]},{"id":"650b0bb4.6feee4","type":"ui_template","z":"f776c22a.15537","group":"2dfc172f.390928","name":"","order":0,"width":0,"height":0,"format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1260,"y":1100,"wires":[[]]},{"id":"eb16f35b.de5c8","type":"file","z":"f776c22a.15537","name":"","filename":"/mnt/usb/TempTestLong.log","appendNewline":true,"createDir":false,"overwriteFile":"true","x":1489.9999771118164,"y":1041.2500381469727,"wires":[]},{"id":"2dfc172f.390928","type":"ui_group","z":"f776c22a.15537","name":"Long Term","tab":"2c38d4b8.8bb68c","order":3,"disp":true,"width":"24","collapse":false},{"id":"2c38d4b8.8bb68c","type":"ui_tab","z":"","name":"Testing","icon":"dashboard","order":1}]

[Zenofmud]

Andrew,
Can you give an example of how you would like the table to look?
Paul

> On Mar 7, 2018, at 12:20 AM, Andrew Wingfield <akwi...@gmail.com> wrote:
>
> So I have some temperature sensors and need to keep the data in a logical and readable way for about 3 years, the sensors are in vaccine fridges. Currently I have the data going into a chart that plots all the temperatures but I also want to generate a dynamic table. I tried just attaching a tableify node to the chart output but the table doesn't look as clean as I'd like. The sensor names appear in one table, then it looks like each sensor is in another table with the times being in milliseconds.
>
> I'm looking for tips on how to either manipulate the array coming out of the chart or feed the data into tableify and make one table with human readable times, sensor names, and temperatures listed. Or, one separate table for each sensor as it might look cleaner. I can post screen shots of anything that might help, just let me know what you'd like to see. Thanks in advance, I'm new to this but find node-red pretty intuitive.
>

> --
> http://nodered.org
>
> Join us on Slack to continue the conversation: http://nodered.org/slack
> ---
> You received this message because you are subscribed to the Google Groups "Node-RED" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to node-red+u...@googlegroups.com.
> To post to this group, send an email to node...@googlegroups.com.
> Visit this group at https://groups.google.com/group/node-red.
> To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/e8a90a6b-1d90-4bf7-95b2-1ef519d78eda%40googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.

[Rewe Node]

I don't know if it's the right method to extract the data from the chart object. Maybe you could start by processing the data.

But whatever.

The line-chart input data can be easily extracted with JSONata.

The example extracts into a simple table object, which can easily be output as a csv table.

To convert timestamp to date string, $fromMillis() can be used in JSONata.

[{"id":"a28fb742.9a7ce8","type":"change","z":"8f28da8b.6cd28","name":"line-chart-input to simple table obj","rules":[{"t":"set","p":"payload","pt":"msg","to":"(\t   $s := payload.series;\t   $d := payload.data;\t   $o := $map(\t       $d,\t       function($v, $i) {\t           {\t               \"serie\": $s[$i],\t               \"data\": $map(\t                   $d[$i],\t                   function($vd) {\t                       {\t                           \"serie\": $s[$i],\t                           \"x\": $fromMillis($vd.x),\t                           \"y\": $vd.y \t                       \t                       }                                       \t                   \t                   }                        \t               \t               ) \t           \t           }         \t       \t       }    \t   \t   );\t   $o.data\t   \t\t)","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":256,"y":258,"wires":[["dc0c9752.e22d28","5fedc72b.3c114"]]},{"id":"6b16c621.ba709","type":"debug","z":"8f28da8b.6cd28","name":"csv table","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","x":625,"y":260,"wires":[]},{"id":"dc0c9752.e22d28","type":"csv","z":"8f28da8b.6cd28","name":"","sep":",","hdrin":false,"hdrout":true,"multi":"one","ret":"\\r\\n","temp":"serie,x,y","skip":"0","x":484,"y":259,"wires":[["6b16c621.ba709"]]},{"id":"5fedc72b.3c114","type":"debug","z":"8f28da8b.6cd28","name":"simple table obj","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","x":511,"y":312,"wires":[]}]

[steve rickus]

Andrew, I don't think you want to try processing the output of the charts. Instead, take your database query results and wire them to two different flows -- one path builds the ui_chart data format, and the other ends with a ui_template node that renders the raw data as an html table.

There are several good examples of how to do this on this mailing list (search for "html table template"). My preference is to use Angular syntax (since it's already built in to the dashboard), such as shown in this discussion from the beginning of the year. It can even format your timestamps into human readable dates, so you don't need to pre-process that either. With a bit of CSS styling, you can make the table look like anything you can imagine...

Give it a try, and if you get stuck then paste your flow here -- someone will help you figure it out.

--

Steve

[Colin Law]

One situation where getting it from the chart might be a good solution
would be if it is required on demand when the user thinks the chart
has some particular data on it. Then a button on the dashboard with
the chart might be a good way to do it.

Colin

> --
> http://nodered.org
>
> Join us on Slack to continue the conversation: http://nodered.org/slack
> ---
> You received this message because you are subscribed to the Google Groups
> "Node-RED" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to node-red+u...@googlegroups.com.

> To post to this group, send email to node...@googlegroups.com.

> Visit this group at https://groups.google.com/group/node-red.
> To view this discussion on the web, visit

> https://groups.google.com/d/msgid/node-red/4e12b146-75fc-41d8-be4c-bc56c4a36e1f%40googlegroups.com.