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


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. int)Show or hide children of a organogram item.
@param id - item id. 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.


Method Description
onloadTrigger a method when component is loaded.
onload(DOMElement element, Object obj) => void
onchangeTrigger a method when an item is added to the organogram chart.
onchange(DOMElement element, Object obj) => void
onclickTrigger a method when element is clicked.
onclick(DOMElement element, Object obj, DOMEvent e) => void

Initialization settings

Property Description
url: stringData can be loaded from a external file.
data: mixedData to be rendered.
zoom: intZoom speed on mouse wheel. Defaults to 0.1
vertical: booleanEnables or disables the vertical view of the organization chart. Defaults to false.
width: numberOrganogram container width.
height: numberOrganogram container height.
search: booleanEnables or disables a search input. Defaults to true.
searchPlaceHolder: stringDefines a placeholder for the search.

Source code example

<script src=""></script>
<link rel="stylesheet" href="" type="text/css" />
<script src=""></script>
<link rel="stylesheet" href="" type="text/css" />

<div id='organogram' class="p10" style="border:1px solid #ccc;"></div>

jSuites.organogram(document.getElementById('organogram'), {
    width: 460,
    height: 420,
    url: '/v4/plugins/organogram.json',
    vertical: true,