Javascript organogram
The jSuites organogram
is a very light javascript plugin to allow developers to create a organogram map with some features, such as:
- Navigation
- Zoom
- Events and programatically actions
Basic example
Quick documentation for the organogram plugin
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: int) | Show or hide children of a organogram item. @param id - item id. |
org.search(query: string) | Search for a specific item in the organogram chart. @param query - search term. |
org.setDimensions(width: number,height: number) | 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.onclick(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. |
zoom: int | Zoom speed on mouse wheel. Defaults to 0.1 |
vertical: boolean | Enables or disables the vertical view of the organization chart. Defaults to false. |
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. |
Source code example
<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' class="p10" style="border:1px solid #ccc;"></div> <script> jSuites.organogram(document.getElementById('organogram'), { width: 460, height: 420, url: '/v4/plugins/organogram.json', vertical: true, }); </script> </html>