The chart aiUI object.
let chart = new OrgChart('#tree', {});
let aiUI = chart.aiUI;
The chart config object.
let chart = new OrgChart('#tree', {});
let config = chart.config;
The chart controlsUI object.
let chart = new OrgChart('#tree', {});
let controlsUI = chart.controlsUI;
The chart editUI object.
let chart = new OrgChart('#tree', {});
let editUI = chart.editUI;
The tree div element.
let chart = new OrgChart('#tree', {});
let element = chart.element;
The chart filterUI object.
let chart = new OrgChart('#tree', {});
let filterUI = chart.filterUI;
Returns true if chart is visible
let chart = new OrgChart('#tree', {});
chart.onInit(() => {
console.log(chart.isVisible);
});
chart.load(nodes)
The tree div element.
let chart = new OrgChart('#tree', {});
let mainElement = chart.mainElement;
The chart menuUI object.
let chart = new OrgChart('#tree', {});
let menuUI = chart.menuUI;
The chart nodeCircleMenuUI object.
let chart = new OrgChart('#tree', {});
let nodeCircleMenuUI = chart.nodeCircleMenuUI;
The chart nodeContextMenuUI object.
let chart = new OrgChart('#tree', {});
let nodeContextMenuUI = chart.nodeContextMenuUI;
The chart nodeMenuUI object.
let chart = new OrgChart('#tree', {});
let nodeMenuUI = chart.nodeMenuUI;
All chart nodes
let chart = new OrgChart('#tree', {});
chart.onInit(() => {
let nodes = chart.nodes;
});
chart.load(nodes)
The chart orgScribeUI object.
let chart = new OrgChart('#tree', {});
let orgScribeUI = chart.orgScribeUI;
All root nodes in the chart
let chart = new OrgChart('#tree', {});
chart.onInit(() => {
let roots = chart.roots
});
chart.load(nodes)
The chart searchUI object.
let chart = new OrgChart('#tree', {});
let searchUI = chart.searchUI;
The chart toolbarUI object.
let chart = new OrgChart('#tree', {});
let toolbarUI = chart.toolbarUI;
The chart undoRedoUI object.
let chart = new OrgChart('#tree', {});
let undoRedoUI = chart.undoRedoUI;
Returns the visible nodes ids
let chart = new OrgChart('#tree', {});
chart.onInit(() => {
console.log(chart.visibleNodeIds);
});
chart.load(nodes)
System instructions let you steer the behavior of a model based on your specific needs and use cases.
OrgChart.AI_SYSTEM_MESSAGES = ["You are an HR assistant for interactive Organizational Char in MyCompamyName."];
Set the clink curve value set to 0 for a straight clicnk
OrgChart.CLINK_CURVE = 1.5;
Whether to embed external images as Base64 data URIs. Enabling this ensures the SVG is "standalone" and won't have broken image links when shared or viewed offline.
Csv import and export delimiter/separator
OrgChart.CSV_DELIMITER = ',';
Edit Form close button
OrgChart.EDITFORM_CLOSE_BTN = '<div data-edit-from-close style="text-align:right; font-size: 34px; padding: 7px 7px 0 0; cursor: pointer;">X</div>';
Escape HTML to prevent Cross-site scripting (also known as XSS) attacks
OrgChart.ESCAPE_HTML = true; // the default value is false
Cut nodes when export with pages, dafault is false
OrgChart.EXPORT_PAGES_CUT_NODES = true;
Filter menu is ordered alphabetically by default
OrgChart.FILTER_ALPHABETICALLY = false;
The text that we have if the chart is empty.
OrgChart.IT_IS_LONELY_HERE_LINK = "Click here to add your first node"
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. Default value: true
OrgChart.LAZY_LOADING = false;
Determines when the invisible nodes will become visible. The number tells on how many free pixel to show nodes The defaul value is auto
OrgChart.LAZY_LOADING_FACTOR = 10;
Set the radius of the roundet links
OrgChart.LINK_ROUNDED_CORNERS = 20;
Minimum in search input before triggering the search.
OrgChart.MINIMUM_SYMBOLS_IN_SEARCH_INPUT = 3;
If false arrange vertically the nodes wothout children Default value: true
OrgChart.MIXED_LAYOUT_ALL_NODES = false;
Set mixed layout if there are collapsed children Defaul value: false
OrgChart.MIXED_LAYOUT_FOR_NODES_WITH_COLLAPSED_CHILDREN = true;
Use mixed layout for example tree or treeLeftOffset if number of children is more then specified value Default value: 1
OrgChart.MIXED_LAYOUT_IF_NUMBER_OF_CHILDREN_IS_MORE_THEN = 0;
A string used for indentation of child nodes. Each tree level increases the indentation by one repetition of this string. Example: if offset = " ", then level 1 children are indented by " ", level 2 by " ", and so on.
OrgChart.ORGSCRIBE_OFFSET = '-';
Render clinks before nodes, default is false
OrgChart.RENDER_CLINKS_BEFORE_NODES = true;
Render links before nodes, default is false
OrgChart.RENDER_LINKS_BEFORE_NODES = true;
A dictionary of custom HTTP headers that will be sent with all server-side JavaScript requests executed by the library.
Each key represents the header name and the value represents the header value.
Example:
OrgChart.REQUEST_CUSTOM_HEADERS = {
"My-Access-Key": "Expected-Key",
"X-Tenant-Id": "my-tenant"
};
This is typically used when the server requires authentication, multi-tenant identification, or other contextual headers.
Reset movable nodes to its original position when expand or collapse Works with movable nodes functionality
OrgChart.RESET_MOVABLE_ONEXPANDCOLLAPSE = true;
Close search result list by click outside list and clean search input
OrgChart.SEARCH_CLOSE_RESULT_ON_ESCAPE_OR_CLICKOUTSIDE = true; // default value is false
Search help symbol.
OrgChart.SEARCH_HELP_SYMBOL = "help";
Search placeholder
OrgChart.SEARCH_PLACEHOLDER = "Chercher"; // the default value is "Search"
Set the limit of the search result items
OrgChart.SEARCH_RESULT_LIMIT = 5;
Gap between slinks in pixels
Scrollbar width (in pixels) for the TreeList layout.
Mouse wheel scroll step (in pixels) for the TreeList layout.
Controls vertical scroll speed in OrgChart.layout.treeList.
Larger values scroll faster; smaller values scroll slower.
Default: half of the first TreeList item height.
OrgChart version
OrgChart.VERSION;
Align children of assistant vertically
OrgChart.VERTICAL_CHILDREN_ASSISTANT = true;
OrgChart.clinkTemplates.myTemplate = Object.assign({}, OrgChart.clinkTemplates.orange);
OrgChart.clinkTemplates.myTemplate.label =
'<text transform="translate(300, 750) rotate(-90)" fill="#F57C00" text-anchor="middle" x="{x}" y="{y}">{val}</text>';
SVG icons
let addIcon = OrgChart.icon.add(24, 24, "#7A7A7A");
let csvIcon = OrgChart.icon.csv(24, 24, "#7A7A7A");
let cursorIcon = OrgChart.icon.cursor(24, 24, "#7A7A7A");
let detailsIcon = OrgChart.icon.details(24, 24, "#7A7A7A");
let editIcon = OrgChart.icon.edit(24, 24, "#7A7A7A");
let excelIcon = OrgChart.icon.excel(24, 24, "#7A7A7A");
let expand_allIcon = OrgChart.icon.expand_all(24, 24, "#7A7A7A");
let fitIcon = OrgChart.icon.fit(24, 24, "#7A7A7A");
let full_screenIcon = OrgChart.icon.full_screen(24, 24, "#7A7A7A");
let happyIcon = OrgChart.icon.happy(24, 24, "#7A7A7A");
let layout_gridIcon = OrgChart.icon.layout_grid(24, 24, "#7A7A7A");
let layout_left_offsetIcon = OrgChart.icon.layout_left_offset(24, 24, "#7A7A7A");
let layout_mixedIcon = OrgChart.icon.layout_mixed(24, 24, "#7A7A7A");
let layout_normalIcon = OrgChart.icon.layout_normal(24, 24, "#7A7A7A");
let layout_right_offsetIcon = OrgChart.icon.layout_right_offset(24, 24, "#7A7A7A");
let layout_treeIcon = OrgChart.icon.layout_tree(24, 24, "#7A7A7A");
let linkIcon = OrgChart.icon.link(24, 24, "#7A7A7A");
let pdfIcon = OrgChart.icon.pdf(24, 24, "#7A7A7A");
let pngIcon = OrgChart.icon.png(24, 24, "#7A7A7A");
let powerPointIcon = OrgChart.icon.powerpoint(24, 24, "#7A7A7A");
let powerPointPreviewIcon = OrgChart.icon.pppreview(24, 24, "#7A7A7A");
let redoIcon = OrgChart.icon.redo(24, 24, "#7A7A7A");
let removeIcon = OrgChart.icon.remove(24, 24, "#7A7A7A");
let sadIcon = OrgChart.icon.sad(24, 24, "#7A7A7A");
let shareIcon = OrgChart.icon.share(24, 24, "#7A7A7A");
let svgIcon = OrgChart.icon.svg(24, 24, "#7A7A7A");
let undoIcon = OrgChart.icon.undo(24, 24, "#7A7A7A");
let userIcon = OrgChart.icon.user(24, 24, "#7A7A7A");
let visioIcon = OrgChart.icon.visio(24, 24, "#7A7A7A");
let xmlIcon = OrgChart.icon.xml(24, 24, "#7A7A7A");
let zoom_inIcon = OrgChart.icon.zoom_in(24, 24, "#7A7A7A");
let zoom_outIcon = OrgChart.icon.zoom_out(24, 24, "#7A7A7A");
Shows/hides lloading image. Usefull when export large data to pdf. You can override and show your own loading image.
let chart = new OrgChart('#tree', {});
fetch('https://balkan.app/content/100k.json')
.then((response) => response.json())
.then((data) => chart.load(data, function () {
OrgChart.loading.hide(chart);
}));
void
let chart = new OrgChart('#tree', {});
chart.on('init', function (sender) {
OrgChart.loading.show(sender);
});
void
You can change the smooth and the speed of the scroll or you can change the values for any specific browser
OrgChart.scroll.smooth = 12;
OrgChart.scroll.speed = 120;
OrgChart.scroll.safari = {
smooth: 12,
speed: 500
}
let chart = new OrgChart(document.getElementById("tree"), {
...
showXScroll: true,
});
OrgChart.slinkTemplates.myTemplate = Object.assign({}, OrgChart.slinkTemplates.orange);
OrgChart.slinkTemplates.myTemplate.labelPosition = 'start';
OrgChart.templates.mainTemplate = Object.assign({}, OrgChart.templates.ana);
OrgChart.templates.mainTemplate.node =
`<rect x="0" y="0" height="80" width="300" fill="#039BE5" stroke-width="1" stroke="#686868" rx="40" ry="40"></rect>`;
The on() method of the OrgChart class sets up a function that will be called whenever the specified event is delivered to the target. *
let chart = new OrgChart('#tree', {});
chart.on('init', function () {
// console.log("initiated")
})
chart.load(nodes);
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.
On canvas SVG click event listener.
let chart = new OrgChart('#tree', {});
chart.onCanvasClick(() => {
});
chart.load(nodes);
the browser event
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 movable 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 onExpandCollapseButtonClick event occurs when the chart is redrawed.
let chart = new OrgChart('#tree', {});
chart.onExpandCollapseButtonClick(() => {
//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.
let 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
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.
let chart = new OrgChart('#tree', {});
chart.onExportStart(() => {
args.styles += '<link href="[link to my styles]" rel="stylesheet">';
//return false; to cancel the operation
});
chart.load(nodes);
Occurs when the nodes in OrgChart has been created and loaded to the DOM.
let chart = new OrgChart('#tree', {});
chart.onInit(() => {
});
chart.load(nodes);
On node double click event listener.
let 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.
let 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 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
let chart = new OrgChart('#tree', {});
...
chart.add({ id: 2, pid: 1, name: "Ashley Barnett", title: "Sales Manager" })
chart.draw();
node data
Adds curved link.
let chart = new OrgChart('#tree', {});
...
chart.addClink(4, 0, 'text')
chart.draw();
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
let chart = new OrgChart('#tree', {});
...
chart.addNode({ id: 1, name: "Denny Curtis", title: "CEO" });
node data
called at the end of animation
indicates if the add event will be called or not
Adds second link.
let chart = new OrgChart('#tree', {});
...
chart.addSlink(4, 0, 'text')
chart.draw();
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.
let chart = new OrgChart('#tree', {});
...
let canRemove = chart.canRemove(2);
identification number of the node
Can update link (Does the node is dropping under itself)
let canDropTheNode = chart.canUpdateLink(draggedNodeId, droppedNodeId));
child id
parent id
Centers specified node on the screen.
let chart = new OrgChart('#tree', {});
...
chart.center(2);
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.
let chart = new OrgChart('#tree', {});
...
chart.changeRoots(1, [2]);
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.
let chart = new OrgChart('#tree', {});
...
chart.clearRedo();
Clears all Undo stack steps.
let chart = new OrgChart('#tree', {});
...
chart.clearUndo();
Collapses specified nodes.
let chart = new OrgChart('#tree', {});
...
chart.collapse(1, [2]);
the id of the node that will not move
node ids that will be collapsed
called after the animation completes
Destroys the object.
let chart = new OrgChart('#tree', {});
...
chart.destroy();
Draws the chart.
let chart = new OrgChart('#tree', {});
...
chart.update({ id: 1, name: "Updated Name", title: "Updated Title" });
chart.draw();
Action for example OrgChart.action.centerNode, default is OrgChart.action.update
parameters for the action
called when the animation completes
Expands specified nodes.
let chart = new OrgChart('#tree', {});
...
chart.expand(1, [2]);
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.
let chart = new OrgChart('#tree', {});
...
chart.expandCollapse(1, [2], [3]);
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
let chart = new OrgChart('#tree', {});
...
chart.exportToCSV();
The name of the exported file See doc...
Exports to JSON
let chart = new OrgChart('#tree', {});
...
chart.exportToJSON();
The name of the exported file See doc...
Exports to Visio document
let chart = new OrgChart('#tree', {});
...
chart.exportToVisio();
export options
called when the export completes See doc...
Exports to XML
let chart = new OrgChart('#tree', {});
...
chart.exportToXML();
The name of the exported file See doc...
Fits the content to the visible area.
let chart = new OrgChart('#tree', {});
...
chart.fit();
called when the animation completes
Fits the content to the visible area if it is ouside of the visible area.
let chart = new OrgChart('#tree', {});
...
chart.fitOfOutside();
called when the animation completes
Genereates unique identification number that can be used for new nodes
let chart = new OrgChart('#tree', {});
...
let id = chart.generateId();
Gets node data.
let chart = new OrgChart('#tree', {});
...
let node = chart.get(2);
identification number of the node
Gets collpased node ids of the specifeid node
let chart = new OrgChart('#tree', {});
...
let ids = chart.getCollapsedIds(2);
Gets menu button html element
let chart = new OrgChart('#tree', {});
...
let menuButton = chart.getMenuButton(2);
Gets the node as OrgChart.node object.
let chart = new OrgChart('#tree', {});
...
let node = chart.getNode(2);
Gets node html element
let chart = new OrgChart('#tree', {});
...
let nodeElement = chart.getNodeElement(2);
node id
Gets the current scale of the chart.
let chart = new OrgChart('#tree', {});
...
let scale = chart.getScale();
Gets svg html element
let chart = new OrgChart('#tree', {});
...
let svg = chart.getSvg();
Gets the view box attribute of the svg html element.
let chart = new OrgChart('#tree', {});
...
let viewBox = chart.getViewBox();
Gets nodes as xml.
let chart = new OrgChart('#tree', {});
let xml = chart.getXML();
let chart = new OrgChart('#tree', {});
...
let height = chart.height();
Gets the height of the container.
Init method can be used if the chart needs to be instantiated without parameters, and init can be called later.
let chart = new OrgChart();
chart.init('#tree', {})
Load nodes data.
let chart = new OrgChart('#tree', {});
...
chart.load([
{ id: 1, name: "Denny Curtis" },
{ id: 2, pid: 1, name: "Ashley Barnett" },
{ id: 3, pid: 1, name: "Caden Ellison" }
]);
nodes data array
function called after the load
Loads nodes from xml.
let chart = new OrgChart('#tree', {});
let xml = '<?xml version="1.0" encoding="utf-8" ?><nodes><node id="1" pids="2" name="Amber McKenzie" gender="female"/><node id="2" pids="1" name="Ava Field" gender="male"/><node id="3" pids="4,5" mid="1" fid="2" name="Peter Stevens" gender="male"/></nodes>';
chart.loadXML(xml);
Xml with node structure
function called after the load
Magnify(Zoom in) specific node in the chart.
let chart = new OrgChart('#tree', {});
...
chart.magnify(2, 1.25);
id of the node
scale to magnify
show on front or back
animation type
Maximize the node. Without parameters maximize all nodes.
let chart = new OrgChart('#tree', {});
...
chart.maximize();
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
let chart = new OrgChart('#tree', {});
...
chart.minimize();
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
let chart = new OrgChart('#tree', {});
...
chart.moveEnd();
let chart = new OrgChart('#tree', {});
...
chart.moveNodesToVisibleArea([2, 3]);
Moves specified nodes to the visible area.
Array of node ids
called at the end of animation
Starts the move
let chart = new OrgChart('#tree', {});
...
chart.moveStart({right: true});
move position
callback function in each step
the name of the animation function, for example OrgChart.anim.inSin
duration before going to 100 percent speed
In onAIToolCalls we parse the AI responce to our functions
chart.onAIToolCalls(function(args){
for(var toolCall of args.toolCalls){
if (toolCall.FunctionName == 'sendEmail'){
toolCall.FunctionResult = sendEmail(toolCall.FunctionArguments);
}
}
});
Redo data operations like adding/removing nodes. Set undoRedoStorageName option before calling this method.
let chart = new OrgChart('#tree', {});
...
chart.redo();
called when the animation completes
Returns the number of Redo stack steps
let chart = new OrgChart('#tree', {});
...
let redoSteps = chart.redoStepsCount();
Removes specified node from nodes collection
let chart = new OrgChart('#tree', {});
...
chart.remove(2);
chart.draw();
identification number of the node
Removes curved link.
let chart = new OrgChart('#tree', {});
...
chart.removeClink(4, 0)
chart.draw();
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.
let chart = new OrgChart('#tree', {});
let listener = function(sender, args){
console.log(sender.removeListener('update', listener));
};
chart.on('update', listener);
chart.load(nodes)
};
family.on('update', listener);
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.
var chart = new OrgChart('#tree', {});
chart.removeNode(2);
identification number of the node
called at the end of animation
indicates if the remove event will be called or not
Removes second link.
let chart = new OrgChart('#tree', {});
...
chart.removeSlink(4, 0)
chart.draw();
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
let chart = new OrgChart('#tree', {});
...
chart.replaceIds[{2:21, 3:31});
dictionary containing old and new ids
called when the replacment completes
Animates specified node with ripple animation - highlight the node.
let chart = new OrgChart('#tree', {});
...
chart.ripple(2);
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.
let chart = new OrgChart('#tree', {});
...
chart.search("Ava");
search for value
search in field names
retrive data for fields See doc...
Sets layout.
let chart = new OrgChart('#tree', {});
...
chart.setLayout(OrgChart.tree);
layout type
lyout config name for the specified sub tree
Sets orientation.
let chart = new OrgChart('#tree', {});
...
chart.setOrientation(2);
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
let chart = new OrgChart('#tree', {});
...
chart.setScale(1.2);
new scale value
Sets the view box attribute of the svg html element.
let chart = new OrgChart('#tree', {});
...
chart.setViewBox();
let chart = new OrgChart('#tree', {});
...
chart.shareProfile(2);
Shares node data, uses build-in device sharing functionallity.
node id
Toggles full screen mode.
let chart = new OrgChart('#tree', {});
...
chart.toggleFullScreen();
Undo data operations like adding/removing nodes. Set undoRedoStorageName option before calling this method.
let chart = new OrgChart('#tree', {});
...
chart.undo();
called when the animation completes
Returns the number of Undo stack steps
let chart = new OrgChart('#tree', {});
...
let undoSteps = chart.undoStepsCount();
Updates the node data
let chart = new OrgChart('#tree', {});
...
chart.update({ id: 1, name: "Updated Name", title: "Updated Title" });
chart.draw();
node data
Updates the node data, redraws the chart and fires update event.
let chart = new OrgChart('#tree', {});
...
chart.updateNode({ id: 4, pid: 2, name: "Updated Name", title: "Updated Title" });
node data
function called when the animation completes
if it set to true the update event is called
Gets the width of the container.
let chart = new OrgChart('#tree', {});
...
let width = chart.width();
Zoom out or zoom in the chart.
let chart = new OrgChart('#tree', {});
...
chart.zoom(true);
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
Animate an element
editForm.prototype.show = function (nodeId) {
OrgChart.animate(div, { opacity: 0, right: -100 }, { opacity: 1, right: 10 }, 300, OrgChart.anim.outSin);
};
element
object with start CSS properties
object with end CSS properties
duration in miliseconds
funcition to animate with
callback function
Convert CSV to nodes
let chart = new OrgChart('#tree', {});
fetch('https://balkan.app/content/data.csv')
.then(response => response.text())
.then(text => {
var nodes = OrgChart.convertCsvToNodes(text);
chart.load(nodes);
});
Opens file upload dialog
let chart = new OrgChart('#tree', {});
chart.editUI.on('element-btn-click', function (sender, args) { OrgChart.fileUploadDialog(function (file) { var formData = new FormData(); formData.append('file', file); alert('upload the file'); }) });
chart.load(nodes)
Defines gradient circle form array of colors
OrgChart.templates.myTemplate.defs = OrgChart.gradientCircleForDefs('circle', ['#FF0000', '#FFD800'], 60, 10);
id of the element
array of colors
radius
stroke width
Checks if the screen is mobile
console.log(OrgChart.isMobile());
is null, empty or undefined
console.log(OrgChart.isNEU(any_prmeter))
Checks if the used library is licnsed or not
console.log(OrgChart.isTrial());
Generates random id for a node
let id = OrgChart.randomId();
Wraps and formats text to fit within a given width and number of lines, returning an SVG-compatible string.
The method measures the provided value and inserts line breaks so the text fits inside the specified width. If the text exceeds the allowed number of lines, it will be truncated according to the internal wrapping rules.
Generated using TypeDoc