# How to display Tree diagram at dashboard

**URL:** <https://discourse.nodered.org/t/how-to-display-tree-diagram-at-dashboard/2511>\
**Category:** Dashboard\
**Created:** [23 August 2018 13:37 UTC](https://discourse.nodered.org/t/how-to-display-tree-diagram-at-dashboard/2511 "2018-08-23T13:37:40Z")\
**Posts on this page:** 5\
**Page:** 2

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [25 August 2018 08:12 UTC](https://discourse.nodered.org/t/how-to-display-tree-diagram-at-dashboard/2511/21 "2018-08-25T08:12:41Z")

</div>

> [@natanel](#):
>
> this tree is very specific to the example data

Thanks for the info! I wasn't aware that it was only usable for specific data. That is a pitty. Unfortunately I have no time to create a generic solution, since I'm busy with other Node-RED stuff at the moment...

But I see that already a lot of ingenius minds are already involved in this discussion. Perhaps they can create a more reusable version of it 🤨

Fingers crossed...

---

<div class="post-metadata">

**Author:** ![natanel](https://avatars.discourse-cdn.com/v4/letter/n/e99b99/32.png) [@natanel](https://discourse.nodered.org/u/natanel)\
**Post date:** [25 August 2018 09:18 UTC](https://discourse.nodered.org/t/how-to-display-tree-diagram-at-dashboard/2511/22 "2018-08-25T09:18:11Z")

</div>

Hi  
Andrei - I already moved forward with adding code computeSvgSizeFromData  
to make the size change as functions of tree size, so meanwhile keeping my SVG creation.  
took your the color node "black" solution.  
[tree.txt](https://discourse.nodered.org/uploads/short-url/qAFn7cECSC67nUIuQsJxB5BNGkk.txt) (13.6 KB)

Bart  
I made the tree much more general  
with ability to read incoming msg  
and changing SVG size as tree size (input data)

I am totally new to javascript , so I googled for those changes  
if there is a better way, you are welcome

 ![tree](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/3/3a6aae565db8379f76de9302ac93c84f39c16854.jpeg)  
usage  
function nodes "prepare tree data" - two nodes, simulating my mesh network data and preparing it for template node "tree schem"

 ![tree3](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/2/2b4b863d3246e6efc9f402cc7584b668799cd242.jpeg)

 ![tree2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/f/f3416adc7e3ac6117ae63d5819ba3cc2d0a64724.jpeg)

template node "tree schem" - the one actually doing the tree (the one you asked in generic )  
the msg.payload input should follow this example

```auto
var treeData = [
  {
    "name": "Top Level",
    "parent": "null",
    "children": [
      {
        "name": "Level 2: A",
        "parent": "Top Level",
        "children": [
          {
            "name": "Son of A",
            "parent": "Level 2: A"
          },
          {
            "name": "Daughter of A",
            "parent": "Level 2: A"
          }
        ]
      },
      {
        "name": "Level 2: B",
        "parent": "Top Level"
      }
    ]
  }
];

```

fill free to use

still will be nice to have

1. add scrolling bar abilities
2. tree options from up/down/left/right
3. correct way to pass to the SVG element to use the id of the TAB/group,  
getting it from the node properties of the template node

---

<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:** [25 August 2018 09:48 UTC](https://discourse.nodered.org/t/how-to-display-tree-diagram-at-dashboard/2511/23 "2018-08-25T09:48:34Z")

</div>

@natanel - I just imported your latest flow and noticed that if I click on one of the children nodes (ID 11, VRN 1), the whole tree collapses and the remaining node moves to the top left with text overlaying itself

![12%20AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/9/909b89cbd535a0a9a0afca4c4ddc73c304ed5632.png)

If I click that node, it moves down but nothing else is shown  
 ![04%20AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/3/33d79ddf9e934bd1df798ef71fdf658607fa2965.png)

If I click again the tree expands but 'ID 11, VRN 1' is colapsed

 ![01%20AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/d/d64125900ab57c96ac7fddde25ac2801d0f7fd09.png)  
and when I click it, the whole tree colapses again only this time the node is green and clicking it does nothing.  
 ![03%20AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/3/3a28a4d58320db5b7dd34801f3fec76e3a6cb1cc.png)

Hope this is helpful....

---

<div class="post-metadata">

**Author:** ![natanel](https://avatars.discourse-cdn.com/v4/letter/n/e99b99/32.png) [@natanel](https://discourse.nodered.org/u/natanel)\
**Post date:** [25 August 2018 11:49 UTC](https://discourse.nodered.org/t/how-to-display-tree-diagram-at-dashboard/2511/24 "2018-08-25T11:49:54Z")

</div>

fix it

[tree.txt](https://discourse.nodered.org/uploads/short-url/wbyGoNYPgOvDMcx1GHQUZw70mFF.txt) (13.7 KB)

![tree3](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/4/4cb62abe218e4f91e442523031781d882f42cd8a.jpeg)

 ![tree](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/b/b2505e75e08d47dd9253bb7e1d7f1bf4ea52d966.jpeg)

 ![tree2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/9/9278ae495ce34b830a8dbabb08812e534376585e.jpeg)

also added the "lime" color for node with hidden children

please write me any other bugs

---

<div class="post-metadata">

**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:** [25 August 2018 13:36 UTC](https://discourse.nodered.org/t/how-to-display-tree-diagram-at-dashboard/2511/25 "2018-08-25T13:36:38Z")

</div>

> [@natanel](#):
>
> also added the "lime" color for node with hidden children

It is working pretty well. Nice touch adding the lime color to show a collapsed node.

All in all it is very impressive what you have achieved.

I am curious, what is your use case ? How do you use this solution and what kind of problem it solves for you ? You mentioned eeprom data... is this some kind of network monitoring ?

[Previous page](https://discourse.nodered.org/t/how-to-display-tree-diagram-at-dashboard/2511.md?page=1)