Show / Hide Table of Contents

Performance

Org Chart JS works well with 100 000 nodes.
For such big data it may takes several seconds for the first load of the data from the backend server, depending on the data size.
For so many nodes we suggest loading only the visible node data, and then on node click going again to the server and getting the whole node data.

Here is how to load all the nodes:

        fetch('https://balkan.app/Content/nodes.json')
            .then((response) => response.json())
            .then((data) => chart.load(data));
    
And here is how to load the data of a particular node:
        var flag = false;
        chart.editUI.on('show', function(sender, id){
            if (!flag){
                fetch(`https://balkan.app/Content/${id}.json`)
                    .then((response) => response.json())
                    .then((data) => {
                    for(var i = 0; i < sender.obj.config.nodes.length; i++){
                        if (sender.obj.config.nodes[i].id == id){
                            sender.obj.config.nodes[i] = data;
                        }
                    }
                    sender.fields = Object.keys(data);
                    chart.editUI.show(id)
                });
                flag = true;
                return false;	
            }
            else{
                flag = false;
            }
        });
    
You can have loading animation before the first load. Here is how:
        chart.on('init', function(sender){
            OrgChart.loading.show(sender);
        });

        chart.load(data, function () {
            OrgChart.loading.hide(chart);
        });
    
Here is the whole code.

Org Chart JS is tested with 103 020 nodes on a PC with 8GB of RAM:
First loading of 8Mb JSON file with 4 fields (id, pid, name and title) takes about 5 seconds.
First loading of 12Mb JSON file with 5 fields (id, pid, name, title and photo) takes about 7 seconds.

Here is an example of visualizing a big chart:

 
    var chart = new OrgChart(document.getElementById("tree"), {
        lazyLoading: true,
        showXScroll: OrgChart.scroll.visible,
        mouseScrool: OrgChart.action.xScroll,
        layout: OrgChart.mixed,
        scaleInitial: OrgChart.match.height,
        ...
    });
    

Where:

  • lazyLoading means that only nodes that are visible will be loaded in the DOM. The default value is true.
  • showXScroll: OrgChart.scroll.visible, the vertical scroll bar will be visble.
  • mouseScrool: OrgChart.action.xScroll, the chart can be navigated with the mouse scroller
  • layout: OrgChart.mixed, the last nodes will be aligned vertically.
  • scaleInitial: OrgChart.match.height, the scalle will be auto calculated in order all nodes to be vissible vertically.

Here is an example with 5000 nodes with images.


Navigation with mini map in 25000 nodes cahrt.