JavaScript Organogram
Quick reference
Considering the example below:
<html> <script src="https://jsuites.net/v4/jsuites.js"></script> <link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" /> <script src="https://jsuites.net/v4/jsuites.layout.js"></script> <link rel="stylesheet" href="https://jsuites.net/v4/jsuites.layout.css" type="text/css" /> <div id='organogram'></div> <script> var org = jSuites.organogram(document.getElementById('organogram'), { width: 460, height: 420, url: '/v4/plugins/organogram.json' }); </script> </html>
Methods
Method | Description |
---|---|
org.refresh() | resets the organogram chart to its initial state. |
org.addItem(item: object) | Appends a new item in the organogram chart. @param item - item object to be added. |
org.removeItem(item: object) | Removes a item in the organogram chart. @param item - item object to be removed. |
org.show(id) | Show or hide children of a organogram item. @param id - item id. |
org.search(query) | Search for a specific item in the organogram chart. @param query - search term. |
org.setDimensions(width,height) | Defines the dimensions of the organogram container. |
Events
Method | Description |
---|---|
onload | Trigger a method when component is loaded.onload(DOMElement element, Object obj) => void |
onchange | Trigger a method when an item is added to the organogram chart.onchange(DOMElement element, Object obj) => void |
onclick | Trigger a method when element is clicked.on(DOMElement element, Object obj, DOMEvent e) => void |
Initialization settings
Property | Description |
---|---|
url: string | Data can be loaded from a external file. |
data: mixed | Data to be rendered. |
vertical: boolean | Enables or disables the vertical view of the organization chart. Defaults to false. |
zoom: int | Zoom speed on mouse wheel. Defaults to 0.1 |
width: number | Organogram container width. |
height: number | Organogram container height. |
search: boolean | Enables or disables a search input. Defaults to true. |
searchPlaceHolder: string | Defines a placeholder for the search. |