# D3 Library and the Template Node **URL:** \ **Category:** Dashboard\ **Created:** [27 June 2022 16:20 UTC](https://discourse.nodered.org/t/d3-library-and-the-template-node/64428 "2022-06-27T16:20:33Z")\ **Posts on this page:** 16\ **Page:** 1
**Author:** ![n61ab](https://avatars.discourse-cdn.com/v4/letter/n/cc9497/32.png) [@n61ab](https://discourse.nodered.org/u/n61ab)\ **Post date:** [27 June 2022 16:20 UTC](https://discourse.nodered.org/t/d3-library-and-the-template-node/64428/1 "2022-06-27T16:20:33Z")
I am learning to use D3 to build charts and want to use the Template Node to add the results to my Node-Red Dashboard. Here is a screenshot of the dashboard. Note, the html text is inside the Node-Red Dashboard group box, upper right. However, the D3 text and SVG circle is outside the Node-Red Dashboard Box, lower left. What am I missing to place the D3 elements inside the Node-Red Dashboard Box? ![Screen Shot 2022-06-27 at 12.17.30 PM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/c/6c687f7e1d5519b7e988e081e7c2d1453c3765e8.jpeg) Here is the HTML code: ```auto d3 Learning >

This Is Text Text

> ``` ---
**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:** [27 June 2022 16:31 UTC](https://discourse.nodered.org/t/d3-library-and-the-template-node/64428/2 "2022-06-27T16:31:45Z")
> [@n61ab](#): > > Template Node While not the answer to your problem, the ui-template node should not contain `html` or `head` or `body` (since the template is injected into the dashboard HTML BODY) As for your issue, you will likely need to read up on D3 and how to target a specific element (the element created by the template node) ---
**Author:** ![n61ab](https://avatars.discourse-cdn.com/v4/letter/n/cc9497/32.png) [@n61ab](https://discourse.nodered.org/u/n61ab)\ **Post date:** [27 June 2022 18:03 UTC](https://discourse.nodered.org/t/d3-library-and-the-template-node/64428/3 "2022-06-27T18:03:00Z")
Thanks, Steve. Hey, are you the same as the [QRZ.com](http://QRZ.com) software engineer? If so, I sent a ham radio message to your [qrz.com](http://qrz.com) email address. Alan ---
**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:** [27 June 2022 18:49 UTC](https://discourse.nodered.org/t/d3-library-and-the-template-node/64428/4 "2022-06-27T18:49:15Z")
No, not me 🙂 ---
**Author:** ![n61ab](https://avatars.discourse-cdn.com/v4/letter/n/cc9497/32.png) [@n61ab](https://discourse.nodered.org/u/n61ab)\ **Post date:** [28 June 2022 14:47 UTC](https://discourse.nodered.org/t/d3-library-and-the-template-node/64428/5 "2022-06-28T14:47:05Z")
Steve and the group, another D3 related question. Can I use D3 within the SVG Node? Can I add a "head" for referencing the D3 library, on the SVG tab? Or use an external template node, with the D3 library reference, on the template's head? Alan ---
**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:** [28 June 2022 15:05 UTC](https://discourse.nodered.org/t/d3-library-and-the-template-node/64428/6 "2022-06-28T15:05:50Z")
> [@n61ab](#): > > Can I use D3 within the SVG Nod Thats not really how things work. You can certainly add D3 to a `\n\n\n\n\n\n\n\n\n", "storeOutMessages": true, "fwdInMessages": true, "resendOnRefresh": true, "templateScope": "local", "className": "", "x": 550, "y": 240, "wires": [ [] ] }, { "id": "2966ae5f64f1964c", "type": "inject", "z": "7213e6b276ca6730", "name": "", "props": [ { "p": "payload" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "", "payload": "[20,30,50]", "payloadType": "json", "x": 270, "y": 260, "wires": [ [ "44ec20834592ad1f", "bdb09ceab5e5f3f4" ] ] }, { "id": "bdb09ceab5e5f3f4", "type": "debug", "z": "7213e6b276ca6730", "name": "", "active": true, "tosidebar": true, "console": false, "tostatus": false, "complete": "payload", "targetType": "msg", "statusVal": "", "statusType": "auto", "x": 540, "y": 340, "wires": [] }, { "id": "68aac522c027a8e4", "type": "ui_group", "name": "Text", "tab": "911a0d7d34b66434", "order": 1, "disp": true, "width": "6", "collapse": false, "className": "" }, { "id": "911a0d7d34b66434", "type": "ui_tab", "name": "HTML", "icon": "dashboard", "order": 1, "disabled": false, "hidden": false } ] ``` ---
**Author:** ![n61ab](https://avatars.discourse-cdn.com/v4/letter/n/cc9497/32.png) [@n61ab](https://discourse.nodered.org/u/n61ab)\ **Post date:** [29 June 2022 09:47 UTC](https://discourse.nodered.org/t/d3-library-and-the-template-node/64428/12 "2022-06-29T09:47:27Z")
I am making progress and learning more D3 and HTML. I was able to "attach" the D3 Bar Chart SVG to a "div" tag, with and id name, inside the html body. Doing so moves the SVG bar chart inside the Dashboard view box.....good. Thanks Steve. Need help: I am still unable to bind the external "msg.payload array" to the D3 Script "var dataArray". Any help here is appreciated. Here is a screenshot of the cleaned up bar chart inside the Template Node's View Box (note: I cannot figure out how to remove the extra "\>\>" on the top of the SVG bar chart): ![Screen Shot 2022-06-29 at 5.34.09 AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/3/e33c123d33affb13847dad2eac6553e4834e0947.jpeg) Here is the revised flow: ```auto [ { "id": "016dbc715629d328", "type": "tab", "label": "Bar Chart", "disabled": false, "info": "", "env": [] }, { "id": "1a026a3e84a63aa6", "type": "ui_template", "z": "016dbc715629d328", "group": "68aac522c027a8e4", "name": "Chart", "order": 0, "width": "11", "height": "8", "format": ">\n\n\n\n \n \n >
\n\n\n \n\n\n\n\n", "storeOutMessages": true, "fwdInMessages": true, "resendOnRefresh": true, "templateScope": "local", "className": "", "x": 550, "y": 240, "wires": [ [] ] }, { "id": "f380d3d1fb41cd3b", "type": "inject", "z": "016dbc715629d328", "name": "", "props": [ { "p": "payload" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "", "payload": "[20,30,50]", "payloadType": "json", "x": 360, "y": 240, "wires": [ [ "1a026a3e84a63aa6", "79796bc98b193fdd" ] ] }, { "id": "79796bc98b193fdd", "type": "debug", "z": "016dbc715629d328", "name": "", "active": true, "tosidebar": true, "console": false, "tostatus": false, "complete": "payload", "targetType": "msg", "statusVal": "", "statusType": "auto", "x": 530, "y": 340, "wires": [] }, { "id": "68aac522c027a8e4", "type": "ui_group", "name": "D3 Bar Chart", "tab": "911a0d7d34b66434", "order": 1, "disp": true, "width": "11", "collapse": false, "className": "" }, { "id": "911a0d7d34b66434", "type": "ui_tab", "name": "HTML", "icon": "dashboard", "order": 1, "disabled": false, "hidden": false } ] ``` ---
**Author:** ![n61ab](https://avatars.discourse-cdn.com/v4/letter/n/cc9497/32.png) [@n61ab](https://discourse.nodered.org/u/n61ab)\ **Post date:** [29 June 2022 13:13 UTC](https://discourse.nodered.org/t/d3-library-and-the-template-node/64428/13 "2022-06-29T13:13:46Z")
I need help to bind Node-Red message array inside the Node-Red template Node, D3 Script. I studied hotNipi's D3 flow and used his exact method. I split the HTML and D3 code to a separate Template Node and used a separate Template\_ui Node to make the dashboard. ![Screen Shot 2022-06-29 at 9.10.15 AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/b/2bb440716663211ba20683f27d3e0a2c4c56b197.jpeg) I then injected the "msg.data = [x,y,z]" into the template node and, in the HTML script section set "var dataArray = {{data}}" and it did not work. What am I missing? Here is a screenshot of the different attempts to build the "dataArray" variable. None of the external variations worked: ![Screen Shot 2022-06-29 at 8.58.12 AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/a/2adebb3ac8121bf8f9be34c0941cd404ec071bda.png) Here is the latest copy of the D2 Node-Red Test/Learning Flow: ```auto [ { "id": "016dbc715629d328", "type": "tab", "label": "Bar Chart", "disabled": false, "info": "", "env": [] }, { "id": "f380d3d1fb41cd3b", "type": "inject", "z": "016dbc715629d328", "name": "[20,400, 150, 300, 500, 100]", "props": [ { "p": "data", "v": "[20,400, 150, 300, 500, 100]", "vt": "json" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "", "payloadType": "str", "x": 300, "y": 340, "wires": [ [ "79796bc98b193fdd", "a221c92bcef3b289" ] ] }, { "id": "79796bc98b193fdd", "type": "debug", "z": "016dbc715629d328", "name": "", "active": true, "tosidebar": true, "console": false, "tostatus": false, "complete": "true", "targetType": "full", "statusVal": "", "statusType": "auto", "x": 530, "y": 240, "wires": [] }, { "id": "1ea70636777790a9", "type": "change", "z": "016dbc715629d328", "name": "", "rules": [ { "t": "set", "p": "data", "pt": "flow", "to": "payload", "tot": "msg" } ], "action": "", "property": "", "from": "", "to": "", "reg": false, "x": 570, "y": 100, "wires": [ [] ] }, { "id": "cd2182c9f42c99b3", "type": "inject", "z": "016dbc715629d328", "name": "[20,400, 150, 300, 500, 100]", "props": [ { "p": "payload" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "", "payload": "[20,400, 150, 300, 500, 100]", "payloadType": "json", "x": 300, "y": 100, "wires": [ [ "1ea70636777790a9" ] ] }, { "id": "a221c92bcef3b289", "type": "template", "z": "016dbc715629d328", "name": "", "field": "template", "fieldType": "msg", "format": "handlebars", "syntax": "mustache", "template": "\n\n\n\n

Bar Chart

\n \n
\n\n\n \n\n\n\n\n", "output": "str", "x": 580, "y": 340, "wires": [ [ "d7543741758a8c67" ] ] }, { "id": "d7543741758a8c67", "type": "ui_template", "z": "016dbc715629d328", "group": "68aac522c027a8e4", "name": "template", "order": 1, "width": "11", "height": "9", "format": "", "storeOutMessages": true, "fwdInMessages": true, "resendOnRefresh": true, "templateScope": "local", "className": "", "x": 760, "y": 340, "wires": [ [] ] }, { "id": "68aac522c027a8e4", "type": "ui_group", "name": "D3 Bar Chart", "tab": "911a0d7d34b66434", "order": 1, "disp": true, "width": "11", "collapse": false, "className": "" }, { "id": "911a0d7d34b66434", "type": "ui_tab", "name": "HTML", "icon": "dashboard", "order": 1, "disabled": false, "hidden": false } ] ``` Alan ---
**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:** [29 June 2022 13:31 UTC](https://discourse.nodered.org/t/d3-library-and-the-template-node/64428/14 "2022-06-29T13:31:02Z")
You need to pass the msg.data into the template as a string not an object/array. You can either use a json node and convert to a string or do it in a function node. e.g. ```auto [{"id":"f380d3d1fb41cd3b","type":"inject","z":"016dbc715629d328","name":"[20,400, 150, 300, 500, 100]","props":[{"p":"data","v":"[20,400, 150, 300, 500, 100]","vt":"json"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payloadType":"str","x":300,"y":340,"wires":[["ec768202.00d54","9644f884.05ced"]]},{"id":"ec768202.00d54","type":"json","z":"016dbc715629d328","name":"","property":"data","action":"","pretty":false,"x":440,"y":300,"wires":[["a221c92bcef3b289"]]},{"id":"9644f884.05ced","type":"function","z":"016dbc715629d328","name":"","func":"msg.data = JSON.stringify(msg.data);\nmsg.template = `\n\n\n\n

Bar Chart

\n \n
\n\n\n \n\n\n\n\n`\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":590,"y":380,"wires":[["7a4f627b.b9ef04"]]},{"id":"a221c92bcef3b289","type":"template","z":"016dbc715629d328","name":"","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"\n\n\n\n

Bar Chart

\n \n
\n\n\n \n\n\n\n\n","output":"str","x":630,"y":280,"wires":[["d7543741758a8c67","79796bc98b193fdd"]]},{"id":"7a4f627b.b9ef04","type":"ui_template","z":"016dbc715629d328","group":"68aac522c027a8e4","name":"template","order":1,"width":"11","height":"9","format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":750,"y":400,"wires":[[]]},{"id":"d7543741758a8c67","type":"ui_template","z":"016dbc715629d328","group":"68aac522c027a8e4","name":"template","order":1,"width":"11","height":"9","format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":760,"y":340,"wires":[[]]},{"id":"79796bc98b193fdd","type":"debug","z":"016dbc715629d328","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":530,"y":240,"wires":[]},{"id":"68aac522c027a8e4","type":"ui_group","name":"D3 Bar Chart","tab":"911a0d7d34b66434","order":1,"disp":true,"width":"11","collapse":false,"className":""},{"id":"911a0d7d34b66434","type":"ui_tab","name":"HTML","icon":"dashboard","order":1,"disabled":false,"hidden":false}] ``` ---
**Author:** ![n61ab](https://avatars.discourse-cdn.com/v4/letter/n/cc9497/32.png) [@n61ab](https://discourse.nodered.org/u/n61ab)\ **Post date:** [29 June 2022 16:21 UTC](https://discourse.nodered.org/t/d3-library-and-the-template-node/64428/15 "2022-06-29T16:21:27Z")
E1cid Thanks a lot! Your explanation to use a string and two examples for building the "msg.template" string has opened up many doors for me. I have a lot more to learn. Since my two questions have been addressed; How to bind the SVG result to the Dashboard View Box: Thanks, Steve, and how to bring in the msg.data array into the D3 script: Thanks E1cid, I consider this topic "solved". Alan ---
**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\ **Post date:** [13 July 2022 16:22 UTC](https://discourse.nodered.org/t/d3-library-and-the-template-node/64428/16 "2022-07-13T16:22:21Z")
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.