OrgChart JS Documentation

Node API

There are two types of nodes, source node and node model, the source node is the data you provided in OrgChart JS options or calling load method load([source nodes array]), the second type, nodes model represent the way how the boxes a visualized.

To get nodes model object you can use chart.getNode(id). To get the source node object you can call chart.get(id). Nodes model object has the following properties:

Node model (var node = chart.getNode(id);)

  • id - the same id you provided in the source node
  • pid - same pid you provided in the source node, the default value is null if not provided or if node with the same id does not exist
  • parent - a reference to the parent node, default value is null, if the nodes is collapse this proprty is not initalized and can be null even if pid is not null
  • stpid - sub tree parent id, it is the parent node id of the root node of the sub tree, it is the same stpid you provided in the source node, the default value is null if not provided or if node with the same id does not exist.
  • stParent - a reference to the parent node of a sub tree, default value is null, if the parent node is minimized this proprty is not initalized and can be null even if we have stpid
  • pppid - partner parent id, it is the partner parent node id of the partner node, it is the same ppid you provided in the source node, the default value is undefined.
  • parnerSeparation - distance between partner node and parent node, based on minParnerSeparation from the config.
  • childrenIds - array of ids, always initialized
  • children - array of children nodes, initialized on demand if all children are collpased it will be empty array
  • stChildrenIds - array of sub tree children root node ids, always initialized
  • stChildren - array of sub tree children root nodes, initialized on demand if the node is minimized it will be empty array
  • tags - array of string values, the same array you provided in the source node
  • templateName - template name, you can specify multiple templates with tags in one chart
  • leftNeighbor - a reference to the left node neighbor, the default value is undefined
  • rightNeighbor - a reference to the right node neighbor, the default value is undefined
  • x - x position, default value undefined
  • y - y position, default value undefined
  • w - width of the node, default value undefined
  • h - height of the node, default value undefined
  • isAssistant - if the node is assistant is true if not false if the node is not initialized is undefined
  • stContainerNodes - sub tree container nodes array, property only for the root node, default value undefined
  • order - it is set only if you define order option, default value undefined
  • collapsed - true if the node is collpased, false if it is not and undefined if not initalized
  • level - a level of the node starting from zero
  • sl - strucure level of the node starting from zero
  • min - true if the node is minimized, default value undefined
  • subLevels - sub levels, default value undefined
  • padding - set only if the node contains sub trees and padding is defined in the template, default value undefined
  • lcn - layout configuration name, default value undefined
  • isSplit - for assistant nodes and mixed layout we create dynamic nodes called splits, default value undefined

Source Node (var node = chart.get(id);)

  • id - the id of the node, mandatory
  • pid - the parent id of the node, optional
  • stpid - sub tree parent node id of the root, optional
  • tags - tags, optional
  • ...n - other node fields

How to iteration through nodes?

Iteration through node structure

 
    function iterate(c, n){
        if (Array.isArray(n)){
            for(var i = 0; i < n.length; i++){
                iterate(c, n[i])
            }
            return;
        }

        console.log(n.id);
        
        for(var i = 0; i < n.stChildrenIds.length; i++){
            iterate(c, c.getNode(n.stChildrenIds[i]))
        }
        
        for(var i = 0; i < n.childrenIds.length; i++){
            iterate(c, c.getNode(n.childrenIds[i]))
        }
    }

    chart.on('init', function(sender){
        iterate(sender, sender.roots)
    });
    

Iteration through node structure including dynamic nodes (splits) skips collapsed and minimized sub trees

 
    function iterate(c, n){
        if (Array.isArray(n)){
            for(var i = 0; i < n.length; i++){
                iterate(c, n[i])
            }
            return;
        }

        console.log(n.id);
        
        for(var i = 0; i < n.stChildren.length; i++){
            iterate(c, n.stChildren[i])
        }
        
        for(var i = 0; i < n.children.length; i++){
            iterate(c, n.children[i])
        }
    }

    chart.on('init', function(sender){
        iterate(sender, sender.roots)
    });
    

Iteration through visible nodes on the screen

 
    chart.on('init', function(sender){
        for(var i = 0; i < sender.visibleNodeIds.length; i++){
            var vnode = sender.getNode(sender.visibleNodeIds[i]);
            console.log(vnode.id);
        }
    });
    

Iteration through all nodes

 
    chart.on('init', function(sender){
        for(var id in sender.nodes){
            console.log(sender.nodes[id].id);
        }
    });
    

How to get the root node?

Get the root node of a tree

 
    function getRootOf(node){
        while (node) {
            if (!node.parent){
                break;
            }
            node = node.parent;
        }
        return node;
    }

    chart.on('init', function(sender){
        var root = getRootOf(sender.getNode(4));
        console.log(root);
    });

Get the root node if the node is child of sub tree

 
    function getRootOf(node){
        while (node) {
            if (!node.parent && !node.stParent){
                break;
            }
            node = node.parent ? node.parent : node.stParent;
        }
        return node;
    }

    chart.on('init', function(sender){
        var root = getRootOf(sender.getNode(4));
        console.log(root);
    });

Methods

  • OrgChart.childrenCount(chart, node) - returns the number of all children and sub children
  • OrgChart.collapsedChildrenCount(chart, node) - returns the number of all collapsed children and sub collapsed children