# GPS Skyplot on dashboard with node template and json **URL:** \ **Category:** Dashboard\ **Created:** [3 July 2020 16:11 UTC](https://discourse.nodered.org/t/gps-skyplot-on-dashboard-with-node-template-and-json/29451 "2020-07-03T16:11:40Z")\ **Posts on this page:** 5\ **Page:** 1

**Author:** ![Martin](https://avatars.discourse-cdn.com/v4/letter/m/73ab20/32.png) [@Martin](https://discourse.nodered.org/u/Martin)\ **Post date:** [3 July 2020 16:11 UTC](https://discourse.nodered.org/t/gps-skyplot-on-dashboard-with-node-template-and-json/29451/1 "2020-07-03T16:11:40Z")

Hello guys!!, First of all i'm new with html and javascript, i have some experience with c++. As i said i'm trying to build a gps skyplot on Node-red dashboard for that purpose i took and edit this [html code](https://stackoverflow.com/questions/49562122/adding-text-values-into-a-circle-in-html-page-using-js) to get cover about circle's color wich was needed to be by gps constellation. With my edition i got this: ![skyplot](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/a/1af3148aeec04c407402e661dcdd9ce3d0327eb1.png) ` ```auto

``` At the above code there are two main functions with are CreateSkyplot() and updateSkyPlot(). These two functions needed to work a json data. So there is my ask for help, how could i push json data into this code ?, i'been spending a couple days and still didn't make it work. this is what i actually have on Node-Red. ```auto [{"id":"cd495777.95bf48","type":"ui_template","z":"671b9ab9.9caff4","group":"c90580c4.94fb","name":"","order":1,"width":"0","height":"0","format":"\n\n\t\n\t\t\n\t\t\n\t\n\n\t\n\t\t

\n\n\t\t\n\n\t\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":400,"y":1880,"wires":[["ea5302c.44631"]]},{"id":"9d15c900.429ef8","type":"inject","z":"671b9ab9.9caff4","name":"JSON2","topic":"","payload":"{\"type\":\"GSV\",\"inView\":[{\"data\":[1,25,90,\"#69b3a2\"]},{\"data\":[2,25,180,\"#69b3a2\"]},{\"data\":[3,25,225,\"#A82051\"]},{\"data\":[4,25,270,\"#69b3a2\"]},{\"data\":[5,25,315,\"#69b3a2\"]},{\"data\":[6,25,0,\"#69b3a2\"]}]}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":210,"y":1880,"wires":[["cd495777.95bf48"]]},{"id":"ea5302c.44631","type":"debug","z":"671b9ab9.9caff4","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":560,"y":1880,"wires":[]},{"id":"c90580c4.94fb","type":"ui_group","z":"","name":"Skyplot","tab":"a624fbe6.d612b8","order":1,"disp":true,"width":"6","collapse":false},{"id":"a624fbe6.d612b8","type":"ui_tab","z":"","name":"GPS","icon":"gps_fixed","order":1,"disabled":false,"hidden":false}] ``` Thanks for reading and any advice. Regards!! ---

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\ **Post date:** [4 July 2020 01:03 UTC](https://discourse.nodered.org/t/gps-skyplot-on-dashboard-with-node-template-and-json/29451/2 "2020-07-04T01:03:23Z")

I got an error (in the browser console) when trying to run your flow. There is a syntax error (unbalanced closing brackets) near the end of the code. After fixing I could get the drawing in the dashboard for both the hard coded json variable as well as for the data injected via msg.payload. ```auto updateSkyPlot(json); //updateSkyPlot(Data); ``` Modified flow: ```auto [{"id":"8caf3d00.56893","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"cb6392a.179c97","type":"ui_template","z":"8caf3d00.56893","group":"e7d5b9e4.972fe8","name":"","order":1,"width":"10","height":"12","format":"\n\n\n\n \n \n\n\n\n

\n\n \n\n\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":400,"y":180,"wires":[["91242dc3.e1365"]]},{"id":"7c2b01f8.e85d4","type":"inject","z":"8caf3d00.56893","name":"JSON2","props":[{"p":"payload","v":"{\"type\":\"GSV\",\"inView\":[{\"data\":[1,25,90,\"#69b3a2\"]},{\"data\":[2,25,180,\"#69b3a2\"]},{\"data\":[3,25,225,\"#A82051\"]},{\"data\":[4,25,270,\"#69b3a2\"]},{\"data\":[5,25,315,\"#69b3a2\"]},{\"data\":[6,25,0,\"#69b3a2\"]}]}","vt":"json"},{"p":"topic","v":"","vt":"string"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"type\":\"GSV\",\"inView\":[{\"data\":[1,25,90,\"#69b3a2\"]},{\"data\":[2,25,180,\"#69b3a2\"]},{\"data\":[3,25,225,\"#A82051\"]},{\"data\":[4,25,270,\"#69b3a2\"]},{\"data\":[5,25,315,\"#69b3a2\"]},{\"data\":[6,25,0,\"#69b3a2\"]}]}","payloadType":"json","x":210,"y":180,"wires":[["cb6392a.179c97"]]},{"id":"91242dc3.e1365","type":"debug","z":"8caf3d00.56893","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":560,"y":180,"wires":[]},{"id":"e7d5b9e4.972fe8","type":"ui_group","z":"","name":"Skyplot","tab":"148b6089.d57b1f","order":1,"disp":true,"width":"10","collapse":false},{"id":"148b6089.d57b1f","type":"ui_tab","z":"","name":"GPS","icon":"gps_fixed","order":1,"disabled":false,"hidden":false}] ``` ![gps](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/d/2d20ef80b2873fadf4d0644f764afe0bce42b6d0.png) ---

**Author:** ![Martin](https://avatars.discourse-cdn.com/v4/letter/m/73ab20/32.png) [@Martin](https://discourse.nodered.org/u/Martin)\ **Post date:** [6 July 2020 12:17 UTC](https://discourse.nodered.org/t/gps-skyplot-on-dashboard-with-node-template-and-json/29451/3 "2020-07-06T12:17:42Z")

Andrei, Thanks for you reply and fixing my brackets, i didn't notice about it. After run this code there is a little trouble, this nodes inject a skyplot on every msg.paylaoad, what could i change to just update the one already shown?, as far as i understand with this code it's already updating any skyplot. ![Captura](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/3/236365db4aa9fa9bd3ae6aac328ddeff8f3a6822.png) ---

**Author:** ![Martin](https://avatars.discourse-cdn.com/v4/letter/m/73ab20/32.png) [@Martin](https://discourse.nodered.org/u/Martin)\ **Post date:** [6 July 2020 13:44 UTC](https://discourse.nodered.org/t/gps-skyplot-on-dashboard-with-node-template-and-json/29451/4 "2020-07-06T13:44:32Z")

I've just made the final solution. Here's the flow. Andrei, Thanks again for your help. Regards! ```auto [{"id":"24a9e9b4.730fe6","type":"ui_template","z":"97fc7bbb.f970d8","group":"d02c68f8.1ad438","name":"","order":1,"width":"10","height":"12","format":"\n\n\n\n \n \n\n\n\n

\n\n \n\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":420,"y":220,"wires":[["e1b9877f.1c3e38"]]},{"id":"7a6eba55.43bec4","type":"inject","z":"97fc7bbb.f970d8","name":"JSON2","topic":"","payload":"{\"type\":\"GSV\",\"inView\":[{\"data\":[5,25,90,\"#00FF00\"]},{\"data\":[5,25,180,\"#0000FF\"]},{\"data\":[5,25,225,\"#FF0000\"]},{\"data\":[5,25,270,\"#FFFF00\"]},{\"data\":[5,25,315,\"#00FFFF\"]},{\"data\":[5,25,0,\"#FF00FF\"]}]}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":210,"y":220,"wires":[["24a9e9b4.730fe6"]]},{"id":"e1b9877f.1c3e38","type":"debug","z":"97fc7bbb.f970d8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":630,"y":220,"wires":[]},{"id":"e2f9fd7e.c4e17","type":"inject","z":"97fc7bbb.f970d8","name":"JSON2","topic":"","payload":"{\"type\":\"GSV\",\"inView\":[{\"data\":[5,70,90,\"#69b3a2\"]},{\"data\":[5,70,180,\"#69b3a2\"]},{\"data\":[5,70,225,\"#A82051\"]},{\"data\":[5,70,270,\"#69b3a2\"]},{\"data\":[5,70,315,\"#69b3a2\"]},{\"data\":[5,70,0,\"#69b3a2\"]}]}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":210,"y":260,"wires":[["24a9e9b4.730fe6"]]},{"id":"5f3a5195.eb244","type":"inject","z":"97fc7bbb.f970d8","name":"JSON2","topic":"","payload":"{\"type\":\"GSV\",\"inView\":[{\"data\":[0,50,90,\"#69b3a2\"]},{\"data\":[0,50,180,\"#69b3a2\"]},{\"data\":[0,50,225,\"#A82051\"]},{\"data\":[0,50,270,\"#69b3a2\"]},{\"data\":[0,50,315,\"#69b3a2\"]},{\"data\":[0,50,0,\"#69b3a2\"]}]}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":210,"y":300,"wires":[["24a9e9b4.730fe6"]]},{"id":"d02c68f8.1ad438","type":"ui_group","z":"","name":"Skyplot 2","tab":"f1e6af6c.7b594","order":1,"disp":true,"width":"10","collapse":false},{"id":"f1e6af6c.7b594","type":"ui_tab","z":"","name":"GPS","icon":"gps_fixed","order":1,"disabled":false,"hidden":false}] ``` ---

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\ **Post date:** [20 July 2020 13:44 UTC](https://discourse.nodered.org/t/gps-skyplot-on-dashboard-with-node-template-and-json/29451/5 "2020-07-20T13:44:38Z")

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