Csv import and export delimiter/separator
Escape HTML to prevent Cross-site scripting (also known as XSS) attacks
Hides the Edit Form when the chart is moved with pan
Can be used to instruct the browser to defer loading of OrgChart that are off-screen until the user scrolls near them. The init event listener will be called as soon as the OrgChart become visible.
Close search result list by click outside list and clean search input
Search help symbol.
Search placeholder
Align children of assistant vertically
node-created and layout event listeners are obsolete use node-initialized or node-layout instead
Shows/hides lloading image. Usefull when export large data to pdf. You can override and show your own loading image.
The on() method of the OrgChart class sets up a function that will be called whenever the specified event is delivered to the target. *
A case-sensitive string representing the event type to listen for.
The object that receives a notification when an event of the specified type occurs. This must be a JavaScript function.
Occurs when a node has been added by addNode method.
var chart = new OrgChart('#tree', {});
chart.onAddNode((args) => {
//return false; to cancel the operation
});
new added data node
The onDrag event occurs when a node is dragged. enableDragDrop option has to be turned on.
var chart = new OrgChart('#tree', {});
chart.onDrag(() => {
//return false; to cancel the operation
});
dragged node id
The onDrop event occurs when a node is dropped. enableDragDrop option has to be turned on.
var chart = new OrgChart('#tree', {});
chart.onDrop(() => {
//return false; to cancel the operation
});
dragged node id
draging element
dropped node id
The onExpandCollpaseButtonClick event occurs when the chart is redrawed.
var chart = new OrgChart('#tree', {});
chart.onExpandCollpaseButtonClick(() => {
//return false; to cancel the operation
});
chart.load(nodes);
Indicates id the operation is collaps or expand
the id of the clicked node
node ids that will be expanded or collapsed
Occurs in the beginning of the export. Use this event listener to hide loading image or upload exported document to your server using ArrayBuffer argument.
var chart = new OrgChart('#tree', {});
chart.onExportEnd(() => {
//return false; to cancel the operation for example id you prefer the exported document to not download
});
chart.load(nodes);
the array buffer is the exported document, you can save it on a server or send it via email
this property is initialized only for PDF/PNG exports
csv ot xml string
this property is initialized only for CSV/XML/SVG exports
extension
this property is initialized only for CSV/XML exports
filename, you can change the filename here
this property is initialized only for CSV/XML exports
an array of node objects
this property is initialized only for CSV/XML exports
export options
this property is initialized only for SVG exports
add extra styles
this property is initialized only for SVG exports
Occurs in the beginning of the export. Extra css styles can be added to the exported document using this event listener or show loading image.
var chart = new OrgChart('#tree', {});
chart.onExportStart(() => {
args.styles += '<link href="https://fonts.googleapis.com/css?family=Gochi+Hand" rel="stylesheet">';
//return false; to cancel the operation
});
chart.load(nodes);
the content to be exported
this property is initialized only for PDF/PNG/SVG exports
extension
this property is initialized only for CSV/XML
filename, you can change the filename here
this property is initialized only for CSV/XML exports
array of node objects
this property is initialized only for CSV/XML exports
export options
this property is initialized only for PDF/PNG/SVG exports
an object that discribes pages to be exported
this property is initialized only for PDF/PNG exports
add extra styles
this property is initialized only for PDF/PNG/SVG exports
The onField() method of the OrgChart class sets up a function that will be called whenever the specified event is delivered to the target.
var chart = new OrgChart('#tree', {});
chart.onField((args) => {
//return false; to cancel
});
chart.load(nodes);
node data json object
svg or html element of the filed, can be changed in the event
name of the field
the node
value of the filed, can be changed in the event
Occurs when the nodes in OrgChart has been created and loaded to the DOM.
var chart = new OrgChart('#tree', {});
chart.onInit(() => {
});
chart.load(nodes);
On node double click event listener.
var chart = new OrgChart('#tree', {});
chart.onNodeDoubleClick(() => {
//return false; to cancel the operation
});
chart.load(nodes);
clicked node data
The onRedraw event occurs when the chart is redrawed.
var chart = new OrgChart('#tree', {});
chart.onRedraw(() => {
});
chart.load(nodes);
Occurs when a node has been removed by removeNode method.
var chart = new OrgChart('#tree', {});
chart.onRemoveNode((args) => {
//return false; to cancel the operation
});
node id
parent ids and sub tree parents ids that needs to be updated on the server. For example if you remove a node that has children all chilren nodes will change their pid to the parent node id of the removed node.
Occurs when the node data has been updated by updateNode method.
var chart = new OrgChart('#tree', {});
chart.onUpdateNode((args) => {
//return false; to cancel the operation
});
new node data
old node data
Adds new node to the nodes collection
node data
Adds curved link.
from node with id
to node with id
link label
link template, for example 'orange'
Adds new node to the nodes collection, redraws the chart and fires remove event
node data
called at the end of animation
indicates if the add event will be called or not
Adds second link.
from node with id
to node with id
link label
link template, for example 'orange'
If specified node has assistant/s or partner/s as children will return false.
identification number of the node
Can update link
child id
parent id
Centers specified node on the screen.
the id of the node
parentState: OrgChart.COLLAPSE_PARENT_NEIGHBORS, childrenState: OrgChart.COLLAPSE_SUB_CHILDRENS, rippleId: rippleId, vertical: false, horizontal: false
called when the animation completes
Changes roots order.
id of a node that will not change is position, can be null
roots id array in the required order
called after the roots are changed and animation completes
Collapses specified nodes.
the id of the node that will not move
node ids that will be collapsed
called after the animation completes
Destroys the object.
Draws the chart.
Action for example OrgChart.action.centerNode, default is OrgChart.action.update
parameters for the action
called when the animation completes
Expands specified nodes.
the id of the node that will not move during the animation
node ids that will be expanded
called after the animation completes
Expand/Collapse lists of nodes.
the id of the node that will not move
expand all nodes with ids
collpase all nodes with ids
called after the animation completes
Exports to CSV
The name of the exported file See doc...
Exports to JSON
The name of the exported file See doc...
Exports to PDF document
export options
called when the export completes See doc...
Exports the details form to PDF.
export options
called when the export completes See doc...
Exports to PNG document
export options
called when the export completes See doc...
Exports the details form to PDF.
export options
called when the export completes See doc...
Exports to SVG document
export options
called when the export completes See doc...
Exports to XML
The name of the exported file See doc...
Fits the content to the visible area.
called when the animation completes
Genereates unique identification number that can be used for new nodes
Gets node data.
identification number of the node
Gets collpased node ids of the specifeid node
Gets menu button html element
Gets the node as OrgChart.node object.
Gets node html element
node id
Gets the current scale of the chart.
Gets svg html element
Gets the view box attribute of the svg html element.
Gets nodes as xml.
Gets the height of the container.
Imports CSV file. See doc...
Imports JSON file. See doc...
Imports XML file. See doc...
Load nodes data.
node data array
Loads nodes from xml.
Xml with node structure
Magnify(Zoom in) specific node in the chart.
id of the node
scale to magnify
show on front or back
animation type
Maximize the node. Without parameters maximize all nodes.
the id of the node, if id is null, undefined ot empty string will maximize all nodes
center horizontally
center vertically
called when the animation completes
Minimize the node. Without parameters minimize all nodes.
the id of the node, if id is null, undefined ot empty string will minimize all nodes
called when the animation completes
Removes specified node from nodes collection
identification number of the node
Removes curved link.
from node with id
to node with id
Removes specified node from nodes collection, redraws the chart and fires remove event.
identification number of the node
called at the end of animation
indicates if the remove event will be called or not
Removes second link.
from node with id
to node with id
Animates specified node with ripple animation - highlight the node.
the id of the node
x value of the ripple center in the node
y value of the ripple center in the node
Search in the chart.
search for value
search in field names
retrive data for fields See doc...
Sets orientation.
orientation type
lyout config name for the specified sub tree
Sets the view box attribute of the svg html element.
Shares node data, uses build-in device sharing functionallity.
node id See doc...
State to url. See doc...
Toggles full screen mode.
Updates the node data
node data
Updates the node data, redraws the chart and fires update event.
node data
function called when the animation completes
if it set to true the update event is called
Gets the width of the container.
Zoom out or zoom in the chart.
true for zoom in, false for zoom out or scale number, if scale is > 1 it will zoom in and scale < 1 zoom out.
array [x, y], where x is x percantege from the width and y is y percentage from the height.
should animate
called when the animation completes
is null, empty or undefined
Checks if the used libraris is licnsed or not
Generated using TypeDoc
HTML element or string selector for example '#tree'