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.
Use mixed layout for example tree or treeLeftOffset if number of children is more then specified value
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
array of node ids
this property is initialized only if draggable option is set
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
Mouse event
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
field template name
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
Occurs when new nodes are added, removed, updated or imported, also when slink or clink is added or removed and after undo or redo operations. Use this event listener to synch your server side database with this.config.nodes, this.config.clinks, this.config.slinks etc.
var chart = new OrgChart('#tree', {});
chart.onUpdated(() => {
//Update your server database with this.config.nodes, this.config.clinks, this.config.slinks etc.
});
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
Clears all Redo stack steps.
Clears all Undo stack steps.
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
function called after the load
Loads nodes from xml.
Xml with node structure
function called after the load
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
Ends the move
Redo data operations like adding/removing nodes. Set undoRedoStorageName option before calling this method.
called when the animation completes
Returns the number of Redo stack steps
Removes specified node from nodes collection
identification number of the node
Removes curved link.
from node with id
to node with id
Removes an event listener previously registered. The event listener to be removed is identified using a combination of the event type and the event listener function itself. Returns true if success and false if fail.
A string which specifies the type of event for which to remove an event listener
The event listener function of the event handler to remove from the event target
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
Replaces the id, pid, stpid, ppid and the ids in clinks, slinks, dottedLines, groupDottedLines. After the replacment updates the UI
dictionary containing old and new ids
called when the replacment completes
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
called at the end of animation
Sets the current scale of the chart. Returns the actual scale limited by scaleMax and scaleMin
new scale value
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.
Undo data operations like adding/removing nodes. Set undoRedoStorageName option before calling this method.
called when the animation completes
Returns the number of Undo stack steps
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
SVG Path rounding function. Takes an input path string or commands and outputs a path string where all line-line corners have been rounded.
The SVG input path or commands array
The amount to round the corners, either a value in the SVG coordinate space, or, if useFractionalRadius is true, a value from 0 to 1.
A new SVG path string with the rounding
Generated using TypeDoc
HTML element or string selector for example '#tree'