Load on Demand

OrgChart JS supports Load on Demand, allowing you to dynamically load child nodes only when a user expands a node. This improves initial load performance and makes large org charts scalable. Instead of loading the full dataset at once, child nodes are fetched from the server only when needed.

You can use Load on Demand with billions of nodes without any performance impact.

The demo below handles 100,000 employees (nodes). Each employee is stored in a separate file, named after its ID.

File structure:

/data/50.json
/data/56.json
/data/119.json
...

The following is the JSON data for the node with id 50 (/data/50.json):

{
  "id": 50,
  "pid": 25,
  "name": "Daniel Turner",
  "title": "Systems Analyst",
  "img": "https://cdn.balkan.app/shared/a/17.jpg",
  "email": "daniel.turner@balkan.app",
  "address": "Rome, Italy",
  "description": "Tests products and tracks bugs.",
  "cids": [ 56, 119, 788, 931 ]
}

• cids represents the children node IDs and is required when using the Load on Demand feature.
• pid is the parent id and it is optional (not required)

---

Edit in BALKAN Code

How it works

1. User expands a node
2. If the expanded node/s does not exist locally, onDemand event is triggered
3. Child nodes are fetched from server/database
4. Nodes are added dynamically to the chart
5. View is optionally adjusted to keep nodes visible

---

Basic Example

var chart = new OrgChart(document.getElementById("tree"), {
    template: 'emily',
    enableSearch: false,
    nodeBinding: {      
        name: 'name',
        title: 'title',
        email: 'email',        
        address: 'address',
        description: 'description',
        img_0: 'img'
    }
});

Handle Load on Demand

chart.onDemand(function(args){
    loadNodesFromServer(args.ids, function(nodes){
        chart.addNodes(args.id, nodes, function(){
            chart.moveNodesToVisibleAreaAfterExpand(args.id, args.ids);
        });
    });
});

Parameters

• args.id the expanded node id (parent node)
• args.ids array of child node IDs to load

Initial Load

You can preload only root or partial dataset:

loadNodesFromServer([50, 56, 119, 788, 931], function(nodes){
    chart.load(nodes);
});

Server / Database Concept

To store the data you can use:

• File system
• SQL database
• NoSQL database
• REST API
• Graph database

Recommended Pattern

chart.onDemand(function(args){
    fetch(`/api/nodes?ids=${args.ids.join(',')}`)
        .then(res => res.json())
        .then(nodes => {
            chart.addNodes(args.id, nodes, function(){
                chart.moveNodesToVisibleAreaAfterExpand(args.id, args.ids);
            });
        });
});

Summary

Load on Demand helps you:

• Improve initial rendering speed
• Handle very large org charts
• Reduce memory usage
• Load data incrementally as users explore the hierarchy

---

For more performance optimization tips and tricks, you can read this help article.