OrgChart JS Documentation

API Reference

Quick Navigation
Options Methods Events
lazyLoading updateNode update
enableDragDrop update remove
enableSearch removeNode add
nodeMenu remove redraw
nodeContextMenu addNode imageuploaded
menu add field
nodeMouseClick setOrientation click
mouseScrool setLayout expcollclick
showXScroll maximize exportstart
showYScroll minimize exportend
template toggleFullScreen searchclick
tags removeSlink dbclick
nodeBinding get import
linkBinding getNode drag
nodes center drop
levelSeparation ripple renderbuttons
siblingSeparation getScale render-link
subtreeSeparation zoom adding
mixedHierarchyNodesSeparation exportSVG added
padding exportPNG updated
orientation exportPDF removed
layout exportCSV init
scaleInitial draw
scaleMin expand
scaleMax collapse
orderBy fit
exportUrl find
collapse exportXML
expand importCSV
searchFields importXML
anim load
zoom loadXML
align getXML
toolbar addClink
nodeMouseDbClick removeClink
sticky expandCollapseToLevel
clink destroy
slink addSlink
minPartnerSeparation stateToUrl
partnerNodeSeparation OrgChart.state.clear
columns magnify
min magnifyBack
partnerChildrenSplitSeparation
state
miniMap
assistantSeparation
enableTouch
roots
lazyLoading

Lazy loading is technique that defers loading of non-critical nodes at page load time. Instead, these non-critical nodes are loaded at the moment of need.

Default value: true

Code example:

 
    var chart = new OrgChart(document.getElementById("tree"), {
        lazyLoading: true,
        ...
    });
    

Go to Quick Navigation
enableDragDrop

With the drag and drop features of OrgChart, you can move nodes easily.

Default value: false

Code example:

 
    var chart = new OrgChart(document.getElementById("tree"), {
            enableDragDrop: true,
        ...
    });
    

Go to Quick Navigation
enableSearch

Enables advanced search.

Default value: true

Code example:

 
    var chart = new OrgChart(document.getElementById("tree"), {
        enableSearch: true,
        ...
    });
    

Go to Quick Navigation
nodeMenu

Enables edit, add, remove and other node operations. Also you can define your own node operation for more information see Node Menu Item

Default value: null

Code example:

 
    var chart = new OrgChart(document.getElementById("tree"), {
	    nodeMenu:{
                details: {text:"Details"},
            	edit: {text:"Edit"},
            	add: {text:"Add"},
            	remove: {text:"Remove"}
            },
        ...
    });
    

Go to Quick Navigation
nodeMouseClick

nodeMouseClick can accept the following values:

  • OrgChart.action.edit - will open the edit view for the clicked node on the right hand side
  • OrgChart.action.details - will open the details view for the clicked node on the right hand side, the details view is very similar to the edit view the only difference is that is read only.
  • OrgChart.action.expandCollapse - will expand or collapse the children nodes
  • OrgChart.action.none - do nothing on node click event
  • OrgChart.action.pan - allows you to move the chart in any direction

Default value: OrgChart.action.details

Code example:

 
    var chart = new OrgChart(document.getElementById("tree"), {
       nodeMouseClick: OrgChart.action.edit
        ...
    });
    

Go to Quick Navigation
mouseScrool

mouseScrool can accept the following values:

  • OrgChart.action.zoom - will zoom in/out on mouse scroll
  • OrgChart.action.ctrlZoom - will zoom in/out on mouse scroll and ctrl button is pressed
  • OrgChart.action.xScroll - left/right move of the chart on mouse scroll
  • OrgChart.action.yScroll - up/down move of the chart on mouse scroll
  • OrgChart.action.none - do nothing on mouse scroll

Default value: OrgChart.action.zoom

Code example:

 
    var chart = new OrgChart(document.getElementById("tree"), {
       mouseScrool: OrgChart.action.zoom
        ...
    });
    

Go to Quick Navigation
showXScroll

showXScroll can accept the following values:

  • OrgChart.none
  • OrgChart.scroll.visible - Will display horisontal scroll bar

Default value: OrgChart.none

Code example:

 
    var chart = new OrgChart(document.getElementById("tree"), {
       showXScroll: OrgChart.scroll.visible
        ...
    });
    

Go to Quick Navigation
showYScroll

showYScroll can accept the following values:

  • OrgChart.none
  • OrgChart.scroll.visible - Will display vertical scroll bar

Default value: OrgChart.none

Code example:

 
    var chart = new OrgChart(document.getElementById("tree"), {
       showYScroll: OrgChart.scroll.visible
        ...
    });
    

Go to Quick Navigation
template

Set template if you want to change the appearance of the chart. OrgChart JS comes with number of build-in templates:

  • ana
  • ula
  • olivia
  • belinda
  • rony
  • mery
  • polina
  • mila
  • diva
  • luba
  • derek
  • base
  • isla
  • deborah

Also you can define your own template. For more information see Creating Custom Template

Default value: ana

Code example:

 
    var chart = new OrgChart(document.getElementById("tree"), {
       template: "derek"
        ...
    });
    

Go to Quick Navigation
tags

With tags option you can:

  • Set specific template for tagged nodes
  • Set node as assistant
  • Set node menu items for tagged nodes
  • Set the node level


Set specific template for tagged nodes. See Multiple Templates in one chart for more details.

Code example:

 
    var chart = new OrgChart(document.getElementById("tree"), {
        tags: {
            Management: {
                template: "rony"
            }
        },     
        nodes: [
            { id: 1, tags: ["Management"] },        
        ...
    });
    


Set node as assistant for tagged nodes. See Assistant for more details.

Code example:

 
    var chart = new OrgChart(document.getElementById("tree"), {
        tags: {
            assistant: {
                template: "mery"
            }
        }
        nodes: [
            { id: 1 },
            { id: 2, pid: 1, tags: ["assistant"] }
        ...
    });     
    


Set node menu items for tagged nodes. See Node Menu Item for more details.

Code example:

 
    var chart = new OrgChart(document.getElementById("tree"), {
        tags:{
            customMenuItems:{
                nodeMenu:{
                    add: {text: "Add New" }
              	}
            }
          },
        ...
    });
    


Set the node level. See Node Menu Item for more details.

Code example:

 
       var chart = new OrgChart(document.getElementById("tree"), {
        tags:{
            "subLevels1": {
                subLevels1: 0
            },
          },
        ...
    });
    

Go to Quick Navigation
nodeBinding

Node binding in OrgChart JS maps node data to node template parameters.

Code example:

 
     var chart = new OrgChart(document.getElementById("orgchart"), {
            nodeBinding: {
                field_0: "name"
            },
            nodes: [
                { id: 1, name: "Amber McKenzie" },
                { id: 2, pid: 1, name: "Ava Field" },
                { id: 3, pid: 1, name: "Peter Stevens" }
            ]
        });
    

In the example above the field name will be bount to field_0 from the template.

Also you can define your own field in the templae, for more information go to Fields page.


Go to Quick Navigation
linkBinding

Link binding in OrgChart JS maps node data to link template parameters.

Code example:

 
        var chart = new OrgChart(document.getElementById("tree"), {
            linkBinding: {
                link_field_0: "createdAt"
            },
            nodes: [
                { id: "1", name: "Amber McKenzie"  },
                { id: "2", pid: "1", createdAt: "Since 08/08/2018" },
                { id: "3", pid: "1", createdAt: "Since 05/04/2018" }
            ]
        }); 
    

Go to Quick Navigation
nodes

Array of node data JSON objects. nodes option is the data source of the chart.

Code example:

 
        var chart = new OrgChart(document.getElementById("tree"), {
            ...
            nodes: [
                { id: "1" },
                { id: "2", pid: "1" },
                { id: "3", pid: "1", tags: ["Sales"] }
            ]
        }); 
    

Node JSON objects could have unlimited number of properties, id, pid and tags are reserved node properties.

  • id - unique identifier, it clould be integer or string
  • pid - is the parent id
  • tags - array of strings

Go to Quick Navigation
levelSeparation

The gap between each level.

Default value: 60

Code example:

 
        var chart = new OrgChart(document.getElementById("tree"), {
            ...
            levelSeparation: 50
        });
    

Go to Quick Navigation
siblingSeparation

The gap between nodes in a subtree.

Default value: 20

Code example:

 
        var chart = new OrgChart(document.getElementById("tree"), {
            ...
            siblingSeparation: 50
        });  
    

Go to Quick Navigation
subtreeSeparation

The gap between subtrees.

Default value: 40

Code example:

 
        var chart = new OrgChart(document.getElementById("tree"), {
            ...
            subtreeSeparation: 50
        }); 
    

Go to Quick Navigation
mixedHierarchyNodesSeparation

The gap between nodes in vertical layout.

Default value: 20

Code example:

 
        var chart = new OrgChart(document.getElementById("tree"), {
            ...
            mixedHierarchyNodesSeparation: 5
        }); 
    

Go to Quick Navigation
padding

The padding option sets the padding area on all four sides of the OrgChart.

Default value: 30

Code example:

 
        var chart = new OrgChart(document.getElementById("tree"), {
            ...
            padding: 20
        });  
    

Go to Quick Navigation
orientation

Specifies the orientation of the OrgChart JS. could accept one of the following values:

  • OrgChart.orientation.top
  • OrgChart.orientation.bottom
  • OrgChart.orientation.right
  • OrgChart.orientation.left
  • OrgChart.orientation.top_left
  • OrgChart.orientation.bottom_left
  • OrgChart.orientation.right_top
  • OrgChart.orientation.left_top

Default value: OrgChart.orientation.top

Code example:

 
        var chart = new OrgChart(document.getElementById("tree"), {
            ...
            orientation: OrgChart.orientation.bottom
        });  
    

Go to Quick Navigation
layout

The layout of the OrgChart

  • OrgChart.normal
  • OrgChart.mixed
  • OrgChart.tree
  • OrgChart.treeLeftOffset
  • OrgChart.treeRightOffset

Default value: OrgChart.normal

Code example:

 
        var chart = new OrgChart(document.getElementById("tree"), {
            ...
            layout: OrgChart.mixed
        });  
    

Go to Quick Navigation
scaleInitial

The scale factor determines what fraction of the entire scale is visible at one time.

  • OrgChart.match.height
  • OrgChart.match.width
  • OrgChart.match.boundary
  • [float]

Default value: 1

Code example:

 
        var chart = new OrgChart(document.getElementById("tree"), {
            ...
            scaleInitial: 0.5
        });  
    
For more information go to Layout page.
Go to Quick Navigation
scaleMin

Determines the minimum scale factor.

Default value: 0.1

Code example:

 
        var chart = new OrgChart(document.getElementById("tree"), {
            ...
            scaleMin: 0.2
        });  
    

Go to Quick Navigation
scaleMax

Determines the naximum scale factor.

Default value: 5

Code example:

 
        var chart = new OrgChart(document.getElementById("tree"), {
            ...
            scaleMax: 10
        });  
    

Go to Quick Navigation
orderBy

The orderBy option is used to sort the nodes in ascending order by specified field. The default order is by nodes order in the nodes array.

Default value: null

Code example:

 
        var chart = new OrgChart(document.getElementById("tree"), {
            ...
            orderBy: "orderId",
            nodes: [
                ...
                { id: 10, pid: 1, orderId: 2 },
                { id: 11, pid: 1, orderId: 1 }
                ...
            ]
        }); 
    

Order by descending

Code example:

 
        var chart = new OrgChart(document.getElementById("tree"), {
            ...
            orderBy: {
                field: "orderId",
                desc: true
            },
            nodes: [
                ...
                { id: 10, pid: 1, orderId: 2 },
                { id: 11, pid: 1, orderId: 1 }
                ...
            ]
        }); 
    

In the example above node with id 11 will be before node with id 10. orderBy can be set to any property from the node JSON object, string or integer.


Go to Quick Navigation
exportUrl

The URL to the export server.

Default value: https://balkangraph.com/export

Code example:

 
        var chart = new OrgChart(document.getElementById("tree"), {
            exportUrl: "https://balkangraph.com/export",
            ...
        }); 
    

Go to Quick Navigation
collapse

Collapse specified level of the chart and its children if allChildren is true.

Code example:

        var chart = new OrgChart(document.getElementById("tree"), { 
            collapse: {
                level: 2,
                allChildren: true
            },
            ...
        });
    

Go to Quick Navigation
expand

Expand specified node ids and its children if allChildren is true.

The expand option works only if collapse is set.

In the example above the second level of the chart will be collapsed but node with id 155 and its children will be expanded.

Code example:

        var chart = new OrgChart(document.getElementById("tree"), { 
            collapse: {
                level: 2,
                allChildren: true
            },
            expand:{
                nodes: [155],
                allChildren: true
            }
            ...
        });
    

Go to Quick Navigation
searchFields

Search by the fields defined in searchFields.

Default value: Empty array

Code example:

 
        var chart = new OrgChart(document.getElementById("tree"), {
            searchFields: ["name", "title", etc...],
            ...
        }); 
    

Go to Quick Navigation
anim

Can be used to control the transition of the nodes on expand/collapse operation.

Default value: func: OrgChart.anim.outPow, duration: 200

duration: defines how long time an animation should take to complete

func: Easing functions specify the speed at which an animation progresses at different points within the animation. Can accept one of the following values:

  • OrgChart.anim.inPow
  • OrgChart.anim.outPow
  • OrgChart.anim.inOutPow
  • OrgChart.anim.inSin
  • OrgChart.anim.outSin
  • OrgChart.anim.inOutSin
  • OrgChart.anim.inExp
  • OrgChart.anim.outExp
  • OrgChart.anim.inOutExp
  • OrgChart.anim.inCirc
  • OrgChart.anim.outCirc
  • OrgChart.anim.inOutCirc
  • OrgChart.anim.rebound
  • OrgChart.anim.inBack
  • OrgChart.anim.outBack
  • OrgChart.anim.inOutBack

Code example:

 
        var chart = new OrgChart(document.getElementById("tree"), {
            anim: {
                func: OrgChart.anim.outBack,
                duration: 500
            },
            ...
        }); 
    

Go to Quick Navigation
zoom

Can be used to control the zooming sensitivity.

Default value: speed: 120, smooth: 12

Code example:

 
        var chart = new OrgChart(document.getElementById("tree"), {
            zoom: {
                speed: 130,
                smooth: 10
            },
            ...
        }); 
    

Go to Quick Navigation
align

The align option specifies the alignment of the nodes inside OrgChart JS.

Default value: OrgChart.CENTER

  • OrgChart.CENTER - centered
  • OrgChart.ORIENTATION - according to the orientation option

Code example:

 
        var chart = new OrgChart(document.getElementById("tree"), {
            align: OrgChart.ORIENTATION,
            ...
        }); 
    

Go to Quick Navigation
toolbar

A toolbar is a set of icons or buttons.

Default value: null

Code example:

 
        var chart = new OrgChart(document.getElementById("tree"), {
            toolbar: {
                layout: true,
                zoom: true,
                fit: true,
                expandAll: false,
                fullScreen: true
            },

            ...
        }); 
    

Go to Quick Navigation
nodeMouseDbClick

nodeMouseDbClick can accept the following values:

  • OrgChart.action.edit - will open the edit view for the clicked node on the right hand side
  • OrgChart.action.details - will open the details view for the clicked node on the right hand side, the details view is very similar to the edit view the only difference is that is read only.
  • OrgChart.action.expandCollapse - will expand or collapse the children nodes
  • OrgChart.action.none - do nothing on node double click event

Default value: OrgChart.none

Code example:

 
    var chart = new OrgChart(document.getElementById("tree"), {
       nodeMouseDbClick: OrgChart.action.edit
        ...
    });
    

Go to Quick Navigation
sticky

Stop the org chart locking to the top of the screen once you move it.

Default value: true

Code example:

 
    var chart = new OrgChart(document.getElementById("tree"), {
       sticky: false
        ...
    });
    

Go to Quick Navigation
partnerSeparation

Partner separation, the distance between the parent node and the partner

Default value: 50

Code example:

 
     var chart = new OrgChart(document.getElementById('tree'), {
            partnerSeparation: 100
            ...
        });
    

Go to Quick Navigation
partnerNodeSeparation

Partner node separation, the distance between partners

Default value: 15

Code example:

 
     var chart = new OrgChart(document.getElementById('tree'), {
            partnerNodeSeparation: 5
            ...
        });
    

Go to Quick Navigation
columns

The number of colums if the chart has multiple root nodes

Default value: 10

Code example:

 
     var chart = new OrgChart(document.getElementById('tree'), {
            columns: 1
            ...
        });
    

Go to Quick Navigation
min

Minimize/Maximize node. The template has to have min

Default value: false

Code example:

 
     var chart = new OrgChart(document.getElementById('tree'), {
            min: true
            ...
        });
    

Go to Quick Navigation
minPartnerSeparation

Minimum gap between partner and node with partners.

Default value: 50

Code example:

 
        var chart = new OrgChart(document.getElementById("tree"), {
            ...
            minPartnerSeparation: 100
        });
    

Go to Quick Navigation
partnerChildrenSplitSeparation

Gap between links.

Default value: 20

Code example:

 
        var chart = new OrgChart(document.getElementById("tree"), {
            ...
            partnerChildrenSplitSeparation: 50
        });
    

Go to Quick Navigation
partnerNodeSeparation

Gap between partners.

Default value: 15

Code example:

 
        var chart = new OrgChart(document.getElementById("tree"), {
            ...
            partnerNodeSeparation: 30
        });
    

Go to Quick Navigation
nodeContextMenu

Context menu. Also you can define your own node operation for more information see Menu

Default value: null

Code example:

 
    var chart = new OrgChart(document.getElementById("tree"), {
	    nodeContextMenu:{
                details: {text:"Details"},
            	edit: {text:"Edit"},
            	add: {text:"Add"},
            	remove: {text:"Remove"}
            },
        ...
    });
    

Go to Quick Navigation
state

Persist the state (scale, position, expanded/collpased and min/max nodes) in the url or indexedDB

Default value: null

Code example:

 
     var chart = new OrgChart(document.getElementById('tree'), {
        state: {
            name: 'StateForMyOrgChart',
            readFromLocalStorage: true,
            writeToLocalStorage: true,
            readFromIndexedDB: true,
            writeToIndexedDB: true,
            readFromUrlParams: true,                    
            writeToUrlParams: true
        },
            ...
    });
    

Go to Quick Navigation
miniMap

Show mini map over the expanded tree.

Default value: false

Code example:

 
     var chart = new OrgChart(document.getElementById('tree'), {
            ...
            miniMap: true
    });
    

Go to Quick Navigation
assistantSeparation

Set the assistant separation value.

Default value: 100

Code example:

 
     var chart = new OrgChart(document.getElementById('tree'), {
            ...
            assistantSeparation: 150
    });
    

Go to Quick Navigation
enableTouch

Enable touch instead of mouse for particular devices with touchscreen/touchpad/trackpad.

Default value: false

Code example:

 
     var chart = new OrgChart(document.getElementById('tree'), {
            ...
            enableTouch: true
    });
    

Go to Quick Navigation
roots

Define nodes as roots.

Default value: null

Code example:

 
     var chart = new OrgChart(document.getElementById('tree'), {
            ...
            roots: [2, 4]
    });
    

Go to Quick Navigation
updateNode

Updates the node JSON object.

Signature:

 
        chart.updateNode(nodeJSONdata, callback, fireEvent);
    

Parameters:

  • nodeJSONdata - node json data
  • callback - (optional) callback function cakked when the animation colpletes
  • fireEvent - (optional) if it set to true the update event is called

Code example:

 
        chart.updateNode({ id: 4, pid: 2, name: "Updated Name", title: "Updated Title" });
    

Will update the node with id 4 and will redraw the chart.


Go to Quick Navigation
update

Updates the node JSON object.

Signature:

 
        chart.update(nodeJSONdata);
    

Parameters:

  • nodeJSONdata - node json data

Code example:

 
        chart.update({ id: 4, pid: 2, name: "Updated Name", title: "Updated Title" });
    

Will find the node with id 4 but it will not redraw the chart, you can use this method when you need to update two or more nodes, then call the draw function. Returns the chart object


Go to Quick Navigation
removeNode

Removes specified node from nodes collection.

Signature:

 
        chart.removeNode(nodeId, callback, fireEvent);
    

Parameters:

  • nodeId - id of the node
  • callback - (optional) callback function will be called at the end of animation
  • fireEvent - (optional) indicates if the remove event will be called or not

Code example:

 
        chart.removeNode(5);
    

Will remove node with id 5 and will redraw the chart.


Go to Quick Navigation
remove

Removes specified node from nodes collection.

Signature:

 
        chart.remove(nodeId);
    

Parameters:

  • nodeId - id of the node

Code example:

 
        chart.remove(5);
    

Will remove node with id 5 but it will not redraw the chart, you can use this method when you need to remove two ore more nodes, then call the draw function. Returns the chart object


Go to Quick Navigation
addNode

Adds new node to the nodes collection.

Signature:

 
        chart.addNode(nodeJSONdata, callback, fireEvent);
    

Parameters:

  • nodeJSONdata - node JSON data
  • callback - (optional) callback function will be called at the end of animation
  • fireEvent - (optional) indicates if the add event will be called or not

Code example:

 
        chart.addNode({ id: 4, pid: 2, name: "Name 1", title: "Title 1" });
    

Will add new node and will redraw the chart.


Go to Quick Navigation
add

Adds new node to the nodes collection.

Signature:

 
        chart.add(nodeJSONdata);
    

Parameters:

  • nodeJSONdata - node JSON data

Code example:

 
        chart.add({ id: 4, pid: 2, name: "Name 1", title: "Title 1" });
    

Will add new node but it will not redraw the chart, you can use this method when you need add two or more nodes, then call the draw function. Returns the chart object.


Go to Quick Navigation
get

Get the source node data.

Signature:

 
        chart.get(id);
    

Parameters:

  • id - node id

Code example:

 
        chart.get(5);
    

Returns the node source data.


Go to Quick Navigation
getNode

Get the node model data.

Signature:

 
        chart.getNode(id);
    

Parameters:

  • id - node id

Code example:

 
        chart.getNode(5);
    

Returns the node model data.


Go to Quick Navigation
center

Center specified node on the screen.

Signature:

 
        chart.center(nodeId, options, callback);
    

Parameters:

  • nodeId - the id of the node
  • options - { parentState: OrgChart.COLLAPSE_PARENT_NEIGHBORS, childrenState: OrgChart.COLLAPSE_SUB_CHILDRENS, rippleId: rippleId, vertical: false, horizontal: false });
  • callback - optional, calls after centering

Code example:

 
        chart.center(5,     {
                parentState: OrgChart.COLLAPSE_PARENT_NEIGHBORS,
                childrenState: OrgChart.COLLAPSE_SUB_CHILDRENS,
                rippleId: 1,
                vertical: true,
                horizontal: false
            }););
    

Go to Quick Navigation
ripple

Animate specified node with ripple animation - highlight the node.

Signature:

 
        chart.ripple(nodeId, clientX, clientY);
    

Parameters:

  • nodeId - the id of the node
  • clientX - x value of the ripple center in the node
  • clientY - y value of the ripple center in the node

Code example:

 
        chart.ripple(5);
    

Go to Quick Navigation
getScale

Gets the current scale of the chart.

Signature:

 
        chart.getScale();
    

Code example:

 
        var scale = chart.getScale();
    

Go to Quick Navigation
zoom

Zoom out or zoom in the chart.

Signature:

 
        chart.zoom(delta, center, anim);
    

Parameters:

  • delta - True for zoom in, false for zoom out or scale number, if scale is > 1 it will zoom in and scale < 1 zoom out.
  • center - Array [x, y], where x is x percantege from the width and y is y percentage from the height. (optional)
  • anim - true, false (optional)

Code example:

 
        chart.zoom(2, [20,20]);
    

Go to Quick Navigation
exportSVG

Exports the chart to svg file.

Signature:

 
        chart.exportSVG(options, callback);
    

Parameters:

  • options - export options
  • callback - optional, calls when the export completes

Code example:

 
        chart.exportSVG({
            filename: "MyOrgChart.svg", 
            nodeId: 5, 
            openInNewTab: false,
            expandChildren: true, 
            padding: 10
        });
    

Go to Quick Navigation
exportPNG

Exports the chart to png file.

Signature:

 
        chart.exportPNG(options, callback);
    

Parameters:

  • options - export options
  • callback - optional, calls when the export completes

Code example:

 
        chart.exportPNG({
            filename: "MyOrgChart.png", 
            nodeId: 5, 
            openInNewTab: false,
            expandChildren: true, 
            margin: [10,20,10,20],
            padding: 10
        });
    

Go to Quick Navigation
exportPDF

Exports the chart to pdf file.

Signature:

 
        chart.exportPDF(options, callback);
    

Parameters:

  • options - export options
  • callback - optional, calls when the export completes

Code example:

 
        chart.exportPDF({
            landscape: true, //false
            format: "A4", //fit
            filename: "MyOrgChart.pdf", 
            nodeId: 5, 
            openInNewTab: false,
            expandChildren: true, 
            margin: [10,20,10,20],
            padding: 10,
            header: 'My header',
            footer: 'Page {current-page} of {total-pages}',
            scale: 'fit' //100
        });
    

Go to Quick Navigation
exportCSV

Exports the chart to CSV file.

Signature:

 
        chart.exportCSV(filename);
    

Parameters:

  • filename - optional

Code example:

 
        chart.exportCSV("MyOrgChart.svg");
    

Go to Quick Navigation
draw

Draws the chart.

Signature:

 
        chart.draw(action, actionParams, callback);
    

Parameters:

  • action - (optional) OrgChart.action.expandCollapse, OrgChart.action.update and OrgChart.action.centerNode
  • actionParams - (optional) parameters of the action
  • callback - (optional) called after the draw

Code example:

 
        chart.draw();
    

Go to Quick Navigation
expand

Expand specified nodes.

Signature:

 
        chart.expand(id, ids, callback);
    

Parameters:

  • id - the id of the node that will not move
  • ids - node ids that will be expanded
  • callback - (optional) called after the animation completes

Code example:

 
        chart.expand(5, [155]);
    

Go to Quick Navigation
collapse

Collapse specified nodes.

Signature:

 
        chart.collapse(id, ids, callback);
    

Parameters:

  • id - the id of the node that will not move
  • ids - node ids that will be collapsed
  • callback - (optional) called after the animation completes

Code example:

 
        chart.collapse(5, [155]);
    

Go to Quick Navigation
fit

Fits the content to the visible area.

Signature:

 
        chart.fit(callback);
    

Parameters:

  • callback - optional, called after the fit

Code example:

 
        chart.fit();
    

Go to Quick Navigation
find

Finds node from the nodes collection.

Signature:

 
        chart.find(value);
    

Parameters:

  • value - search by definded value

Code example:

 
        chart.find("John");
    

Go to Quick Navigation
exportXML

Exports the chart to XML file.

Signature:

 
        chart.exportXML(filename);
    

Parameters:

  • filename - the name of the file

Code example:

 
        chart.exportXML("MyOrgChart.svg");
    

Go to Quick Navigation
importCSV

Import CSV file.

Signature:

 
        chart.importCSV();
    

Code example:

 
        chart.importCSV();
    

Go to Quick Navigation
importXML

Import XML file.

Signature:

 
        chart.importXML();
    

Code example:

 
        chart.importXML();
    

Go to Quick Navigation
load

Load nodes file.

Signature:

 
        chart.load(nodes json array);
    

Code example:

 
        chart.load([{id: 1}]);
    

Go to Quick Navigation
loadXML

Load nodes from xml.

Signature:

 
        chart.loadXML(xml as text);
    

Code example:

 
        chart.loadXML('<?xml version="1.0" encoding="utf-8" ?><nodes><node id="1" name="plamen"/><node id="2" pid="1" name="ivan"/></nodes>');
    

Go to Quick Navigation
getXML

Gets nodes as xml.

Signature:

 
        chart.getXML();
    

Code example:

 
        var xml = chart.getXML();
    

Go to Quick Navigation
expandCollapseToLevel

Expand/Collapse to level.

Signature:

 
        chart.expandCollapseToLevel(id, collapse, expand, callback);
    

Code example:

 
        chart.expandCollapseToLevel({
                level: 2
            }, {
                nodes: [155]
            }, function(){
                console.log('callback')
            });
    

Go to Quick Navigation
destroy

Destroys the object.

Signature:

 
        chart.destroy();
    

Go to Quick Navigation
stateToUrl

State to url.

Signature:

 
        chart.stateToUrl();
    

Go to Quick Navigation
OrgChart.state.clear

State to url.

Signature:

 
        OrgChart.state.clear(stateName)

    

Go to Quick Navigation
magnify

Magnify node.

Signature:

 
        chart.magnify(stateName)

    

Go to Quick Navigation
setOrientation

Set orientation.

Signature:

 
        chart.setOrientation(orientation, lyoutConfigName);
    

Parameters:

  • orientation - orientation type, OrgChart.orientation.top, OrgChart.orientation.bottom, OrgChart.orientation.right, OrgChart.orientation.left, OrgChart.orientation.top_left, OrgChart.orientation.bottom_left, OrgChart.orientation.right_top and OrgChart.orientation.left_top
  • lyoutConfigName - (optional) lyout config name for the specified sub tree

Code example:

 
        chart.setOrientation(OrgChart.orientation.bottom);
    

Go to Quick Navigation
setLayout

Set layout.

Signature:

 
        chart.setLayout(layout, lyoutConfigName);
    

Parameters:

  • layout - layout type, OrgChart.normal, OrgChart.mixed, OrgChart.tree, OrgChart.treeLeftOffset and OrgChart.treeRightOffset
  • lyoutConfigName - (optional) lyout config name for the specified sub tree

Code example:

 
        chart.setLayout(OrgChart.tree);
    

Go to Quick Navigation
maximize

Maximize the node.

Signature:

 
        chart.maximize(id, horizontalCenter, verticalCenter, callback);
    

Parameters:

  • id - the id of the node
  • horizontalCenter - (optional) center horizontally (true,false)
  • verticalCenter - (optional) center vertically (true,false)
  • callback - (optional) callback function is called when the animation completes

Code example:

 
        chart.maximize(5);
    

Go to Quick Navigation
minimize

Minimize the node.

Signature:

 
        chart.minimize(id, callback);
    

Parameters:

  • id - the id of the node
  • callback - (optional) callback function is called when the animation completes

Code example:

 
        chart.minimize(5);
    

Go to Quick Navigation
toggleFullScreen

Toggle full screen mode.

Signature:

 
        chart.toggleFullScreen();
    

Code example:

 
        chart.toggleFullScreen();
    

Go to Quick Navigation
update

Update node event.

Parameters:

  • sender - OrgChart JS object for which the event is fired
  • oldNode - old node JSON object
  • newNode - new node JSON object

Code example:

 
        var chart = new OrgChart(...);
        
        chart.on('update', function (sender, oldNode, newNode) {
            // your code goes here 
            // return false; to cancel the operation
        });  

        chart.load(...);
    

Go to Quick Navigation
remove

Remove node event.

Parameters:

  • sender - OrgChart JS object for which the event is fired
  • nodeId - the id of the node that will be removed
  • newPidsAndStpidsForIds - the new children pids and spids of the removed node

Code example:

 
        var chart = new OrgChart(...);
        
         chart.on('remove', function (sender, nodeId, newPidsAndStpidsForIds) {
            // your code goes here 
            // return false; to cancel the operation
        });  

        chart.load(...);
    

Go to Quick Navigation
add

Add node event.

Parameters:

  • sender - OrgChart JS object for which the event is fired
  • node - node JSON object

Code example:

 
         var chart = new OrgChart(...);
        
         chart.on('add', function (sender, node) {
            // your code goes here 
            // return false; to cancel the operation
         });  

         chart.load(...);
    

Go to Quick Navigation
redraw

Redraw OrgChart event.

Parameters:

  • sender - OrgChart JS object for which the event is fired

Code example:

 
         var chart = new OrgChart(...);
        
         chart.on('redraw', function (sender) {
            // your code goes here 
            // return false; to cancel the operation
         });  

         chart.load(...);
    

Go to Quick Navigation
imageuploaded

Image uploaded OrgChart event.

Parameters:

  • sender - editUI object
  • file - the file that will be uploded to the server
  • inputHtmlElement - input html element

Code example:

 
         var chart = new OrgChart(...);
        
         chart.editUI.on('imageuploaded', function (sender, file, inputHtmlElement) {
            // your code goes here 
            // return false; to cancel the operation
         });  

         chart.load(...);
    
For more information on how to upload images to the server go to Tutorial: How to Upload Image Files from OrgChart JS to the server - ASP.NET Core
Go to Quick Navigation
click

On click node event.

Parameters:

  • sender - OrgChart JS object for which the event is fired
  • args.node - node JSON object
  • args.event - the event you use in the function

Code example:

 
         var chart = new OrgChart(...);
        
         chart.on('click', function (sender, args) {
            // your code goes here 
            // return false; to cancel the operation
         });  

         chart.load(...);
    

Go to Quick Navigation
expcollclick

On expand/collapse button click event.

Parameters:

  • sender - OrgChart JS object for which the event is fired
  • collapsing - true/false
  • id - the id of the clicked node
  • ids - node ids that will be expanded or collapsed

Code example:

 
         var chart = new OrgChart(...);
        
         chart.on('expcollclick', function (sender, collapsing, id, ids) {
            // your code goes here 
            // return false; to cancel the operation
         });  

         chart.load(...);
    

Go to Quick Navigation
exportstart

Fires before the export operation. Use this event to show loading image.

Parameters:

  • sender - OrgChart JS object for which the event is fired
  • args - export options

args options:

PDF/PNG CSV/XML SVG
args.content
args.options
args.pages
args.styles
args.ext
args.filename
args.nodes
args.content
args.options
args.styles

Code example:

 
         var chart = new OrgChart(...);
        
         chart.on('exportstart', function (sender, args) {
            // your code goes here 
            // return false; to cancel the operation
         });  

         chart.load(...);
    

Go to Quick Navigation
exportend

Fires afetr the export operation completes. Use this event to hide loading image.

Parameters:

  • sender - OrgChart JS object for which the event is fired
  • args - export options

args options:

PDF/PNG CSV/XML SVG
args.ArrayBuffer



args.content
args.ext
args.filename
args.nodes
args.content
args.options
args.styles


Code example:

 
         var chart = new OrgChart(...);
        
         chart.on('exportend', function (sender, args) {
            // your code goes here 
            // return false; to cancel the operation
         });  

         chart.load(...);
    

Go to Quick Navigation
searchclick

Fires when the user click on an item from the search grid.

Parameters:

  • sender - OrgChart JS object for which the event is fired
  • nodeId - Node id

Code example:

 
         var chart = new OrgChart(...);
        
         chart.on('searchclick', function (sender, nodeId) {
            // your code goes here 
            // return false; to cancel the operation
         });  

         chart.load(...);
    

Go to Quick Navigation
dbclick

On double click node event.

Parameters:

  • sender - OrgChart JS object for which the event is fired
  • node - node JSON object

Code example:

 
         var chart = new OrgChart(...);
        
         chart.on('dbclick', function (sender, node) {
           // your code goes here 
           // return false; to cancel the operation
         });  

         chart.load(...);
    

Go to Quick Navigation
import

On import event.

Parameters:

  • sender - OrgChart JS object for which the event is fired
  • nodes - Imported nodes JSON object

Code example:

 
        var chart = new OrgChart(...);

        chart.on('import', function(sender, nodes){
            // your code goes here 
            // return false; to cancel the operation
        }); 

        chart.load(...);   
    

Go to Quick Navigation
drag

On drag event.

Parameters:

  • sender - OrgChart JS object for which the event is fired
  • draggedNodeId - gragged node id

Code example:

 
        var chart = new OrgChart(...);

        chart.on('drag', function (sender, draggedNodeId) {
            // your code goes here 
            // return false; to cancel the operation
        });

        chart.load(...); 
    

Go to Quick Navigation
drop

On drop event.

Parameters:

  • sender - OrgChart JS object for which the event is fired
  • draggedNodeId - gragged node id
  • dropprdNodeId - dropped node id

Code example:

 
        var chart = new OrgChart(...);

        chart.on('drop', function (sender, draggedNodeId, droppedNodeId) {
            // your code goes here 
            // return false; to cancel the operation
        });

        chart.load(...); 
    

Go to Quick Navigation
renderbuttons

Render buttons event.

Parameters:

  • sender - OrgChart JS object for which the event is fired
  • args.html - You can change the html
  • args.node - The node object

Code example:

 
        var chart = new OrgChart(...);

        chart.on('renderbuttons', function (sender, args) {
            // your code goes here 
        });

        chart.load(...); 
    

Go to Quick Navigation
field

On field event.

Parameters:

  • args.field - the object
  • args.type - the type of the field
  • args.name - the name of the field

Code example:

 
        var chart = new OrgChart(...);

        chart.editUI.on('field', function(sender, args){
            // your code goes here 
            // return false; to cancel the operation
        });

        chart.load(...); 
    

Go to Quick Navigation
addiing

Fires after the node is added to the collection and before drawing the chart.

Parameters:

  • sender - OrgChart JS object for which the event is fired
  • id - node id

Code example:

 
         var chart = new OrgChart(...);
        
         chart.on('addiing', function (sender, id) {
            // your code goes here 
            // return false; to cancel the operation
         });  

         chart.load(...);
    

Go to Quick Navigation
added

Fires after add is finished.

Parameters:

  • sender - OrgChart JS object for which the event is fired
  • id - node id

Code example:

 
         var chart = new OrgChart(...);
        
         chart.on('added', function (sender, id) {
            // your code goes here 
            // return false; to cancel the operation
         });  

         chart.load(...);
    

Go to Quick Navigation
updated

Fires after update is finished.

Parameters:

  • sender - OrgChart JS object for which the event is fired
  • oldNode - old node JSON object
  • newNode - new node JSON object

Code example:

 
         var chart = new OrgChart(...);
        
         chart.on('updated', function (sender, oldNode, newNode) {
            // your code goes here 
            // return false; to cancel the operation
         });  

         chart.load(...);
    

Go to Quick Navigation
removed

Fires after remove is finished.

Parameters:

  • sender - OrgChart JS object for which the event is fired
  • nodeId - the id of the node that will be removed
  • newPidsAndStpidsForIds - the new children pids and spids of the removed node

Code example:

 
        var chart = new OrgChart(...);
        
         chart.on('remove', function (sender, nodeId, newPidsAndStpidsForIds) {
            // your code goes here 
            // return false; to cancel the operation
        });  

        chart.load(...);
    

Go to Quick Navigation
init

Fires after the chart is initialized.

Parameters:

  • sender - OrgChart JS object for which the event is fired

Code example:

 
        var chart = new OrgChart(...);
        
         chart.on('init', function (sender) {
            // your code goes here 
            // return false; to cancel the operation
        });  

        chart.load(...);
    

Go to Quick Navigation