Collapse all nodes on load for very large org chart

Question

I have an org chart of ~6000 people that I need to get to render. As I'm sure you can imagine, it's a little too much to load all at once--

I was wondering if it's possible to load all of the nodes in collapsed, and then have the search function expand the tree of the matching node.

Or perhaps someone knows of a better way to load up a huge org chart like this?

Any help at all is massively appreciated!

BALKANGraph · Answer 1 · 2018-10-28T22:04:38.563

OrgChart JS does support lazy loading and they have an example with 5000 nodes, probably 6000 wouldn't be a problem

Here is the demo:

window.onload = function () {
    var nodes = [];
    var links = [];
    var imgIndex = 1;
    for (var i = 1; i < 4496; i++) {
        nodes.push({
            id: i, name: i, photo: "//balkangraph.com/js/img/" + imgIndex + ".jpg"
        });
        imgIndex++;
        if (imgIndex > 10) {
            imgIndex = 1;
        }
    }

    for (var i = 2; i < 500; i++) {
        links.push({ from: i, to: 1 });

        for (var j = 1; j < 4; j++) {
            links.push({ from: 3 * i + j - 2, to: i });
            for (var k = 1; k < 4; k++) {
                links.push({ from: 3 * (3 * i + j - 2) + k - 2, to: 3 * i + j - 2 });
            }
        }
    }
    var chart = new OrgChart(document.getElementById("tree"), {
        template: "ana",
        lazyLoading: true,
        showXScroll: BALKANGraph.scroll.visible,
        mouseScroolBehaviour: BALKANGraph.action.xScroll,
        layout: BALKANGraph.mixed,
        scaleInitial: BALKANGraph.match.height,
        nodeBinding: {
            field_0: "name",
            img_0: "photo"
        },
        links: links,
        nodes: nodes
    });  
};

html, body {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: Helvetica;
}

#tree {
    width: 100%;
    height: 100%;
}

<script src="https://balkangraph.com/js/latest/OrgChart.js"></script>


<div id="tree"></div>

Collapse all nodes on load for very large org chart

1 Answers1