Documentation

Options

Go to top

dataSource

The data source.
Default value: null
Code examples:
Initialize from html table element. For more details open this demo and hit the button in the top right corner to see the HTML code.
    $("#people").getOrgChart({	
        dataSource: document.getElementById("orgChartTable") //orgChartTable is tableHTMLElement
    });
Initialize from XML file. For more details open this demo and hit the button in the top right corner to see the HTML code. XML file.
    $("#people").getOrgChart({	
        dataSource: "/xmlrepository/getorgchart.xml" //xml file
    });
Initialize on the client. For more details open this demo and hit the button in the top right corner to see the HTML code.
    $("#people").getOrgChart({	
        dataSource: [
	        { id: 1, parentId: null, Name: "Amber McKenzie"},
	        { id: 2, parentId: 1, Name: "Ava Field"},
	        { id: 3, parentId: 1, Name: "Evie Johnson"}
    });
Go to top

theme

The GetOrgChart widget GetOrgChart uses different SVG Shapes to style its look and feel. If specific styling is needed, the following theme names can be used:
  • annabel
  • belinda
  • cassandra
  • deborah
  • lena
  • monica
  • eve
  • vivian
  • helen
Default value: "annabel"
Code examples:
    $("#people").getOrgChart({			
        theme: "vivian",
        dataSource: [
            { id: 1, parentId: null, Name: "Amber McKenzie"},
            { id: 2, parentId: 1, Name: "Ava Field"},
            { id: 3, parentId: 1, Name: "Evie Johnson"}]
    });
Edit in jsFiddle
Go to top

color

The GetOrgChart widget has a wealth of predefined colors. There are a total of 18 presets, which cover a wide variety of visual styles.
  • darkred
  • pink
  • darkorange
  • orange
  • lightgreen
  • green
  • lightteal
  • teal
  • lightblue
  • blue
  • darkpurple
  • purple
  • mediumdarkblue
  • darkblue
  • cordovan
  • darkcordovan
  • neutralgrey
  • black
You can find all available colors into our examples.
Default value: "darkred"
Code examples:
    $("#people").getOrgChart({			
        color: "blue",
            dataSource: [
	        { id: 1, parentId: null, Name: "Amber McKenzie"},
	        { id: 2, parentId: 1, Name: "Ava Field"},
	        { id: 3, parentId: 1, Name: "Evie Johnson"}]
    });
Edit in jsFiddle
Go to top

editable

Sets a value that indicates whether GetOrgChart widget can be edited.
Default value: true
Code examples:
    $("#people").getOrgChart({			
        editable: false,
        dataSource: [
	        { id: 1, parentId: null, Name: "Amber McKenzie"},
	        { id: 2, parentId: 1, Name: "Ava Field"},
	        { id: 3, parentId: 1, Name: "Evie Johnson"}]
    });
Edit in jsFiddle
Go to top

zoomable

Sets a value that indicates whether GetOrgChart widget can be magnified.
Default value: true
Code examples:
    $("#people").getOrgChart({			
        zoomable: false,
        dataSource: [
	        { id: 1, parentId: null, Name: "Amber McKenzie"},
	        { id: 2, parentId: 1, Name: "Ava Field"},
	        { id: 3, parentId: 1, Name: "Evie Johnson"}]
    });
Edit in jsFiddle
Go to top

searchable

Enables advanced search.
Default value: true
Code examples:
    $("#people").getOrgChart({			
        searchable: false,
        dataSource: [
	        { id: 1, parentId: null, Name: "Amber McKenzie"},
	        { id: 2, parentId: 1, Name: "Ava Field"},
	        { id: 3, parentId: 1, Name: "Evie Johnson"}]
    });
Edit in jsFiddle
Go to top

printable

Enables printing.
Default value: false
Code examples:
    $("#people").getOrgChart({			
        printable: true,
        dataSource: [
	        { id: 1, parentId: null, Name: "Amber McKenzie"},
	        { id: 2, parentId: 1, Name: "Ava Field"},
	        { id: 3, parentId: 1, Name: "Evie Johnson"}]
    });
Go to top

movable

Specifies whether the GetOrgChart pane can be moved by the user.
Default value: true
Code examples:
    $("#people").getOrgChart({			
        movable: false,
        dataSource: [
	        { id: 1, parentId: null, Name: "Amber McKenzie"},
	        { id: 2, parentId: 1, Name: "Ava Field"},
	        { id: 3, parentId: 1, Name: "Evie Johnson"}]
    });
Edit in jsFiddle
Go to top

gridView

Specifies whether the GetOrgChart has grid view mode.
Default value: false
Code examples:
    $("#people").getOrgChart({			
        gridView: true,
        dataSource: [
	        { id: 1, parentId: null, Name: "Amber McKenzie"},
	        { id: 2, parentId: 1, Name: "Ava Field"},
	        { id: 3, parentId: 1, Name: "Evie Johnson"}]
    });
Edit in jsFiddle
Go to top

linkType

The GetOrgChart widget has a wealth of predefined link types.
  • M
  • B
Default value: "B"
Code examples:
    $("#people").getOrgChart({			
        linkType: "M",
        dataSource: [
	        { id: 1, parentId: null, Name: "Amber McKenzie"},
	        { id: 2, parentId: 1, Name: "Ava Field"},
	        { id: 3, parentId: 1, Name: "Evie Johnson"}]
    });
Edit in jsFiddle
Go to top

orientation

Specifies the orientation of the GetOrgChart widget.
  • getOrgChart.RO_TOP
  • getOrgChart.RO_BOTTOM
  • getOrgChart.RO_RIGHT
  • getOrgChart.RO_LEFT
  • getOrgChart.RO_TOP_PARENT_LEFT
  • getOrgChart.RO_BOTTOM_PARENT_LEFT
  • getOrgChart.RO_RIGHT_PARENT_TOP
  • getOrgChart.RO_LEFT_PARENT_TOP
Default value: getOrgChart.RO_TOP
Code examples:
    $("#people").getOrgChart({			
        orientation: getOrgChart.RO_LEFT,
        dataSource: [
	        { id: 1, parentId: null, Name: "Amber McKenzie"},
	        { id: 2, parentId: 1, Name: "Ava Field"},
	        { id: 3, parentId: 1, Name: "Evie Johnson"}]
    });
Edit in jsFiddle
Go to top

primaryColumns

An array of columns that function as primary columns for the GetOrgChart widget. Only primary columns are visible on the main view. In the example bellow only the firstName column will be visible on the main view.
Default value: ["Name", "Title"]
Code examples:
    $("#people").getOrgChart({			
        primaryColumns: ["firstName"],
        dataSource: [
	        { id: 1, parentId: null, firstName: "Amber", lastName: "McKenzie"},
	        { id: 2, parentId: 1, firstName: "Ava Field", lastName: "Field"},
	        { id: 3, parentId: 1, firstName: "Evie Johnson", lastName: "Johnson"}]
    });
Edit in jsFiddle
Go to top

imageColumn

imageColumn property specifies an image that is displayed in the image box.
Default value: "Image"
Code examples:
    $("#people").getOrgChart({			
        imageColumn: "pic",
        dataSource: [
	        { id: 1, parentId: null, Name: "Amber McKenzie", pic: "http://getorgchart.com/GetOrgChart/getorgchart-demos/images/f-18.jpg"},
	        { id: 2, parentId: 1, Name: "Ava Field", pic: "http://getorgchart.com/GetOrgChart/getorgchart-demos/images/f-1.jpg"},
	        { id: 3, parentId: 1, Name: "Evie Johnson", pic: "http://getorgchart.com/GetOrgChart/getorgchart-demos/images/f-16.jpg"}]
    });
Edit in jsFiddle
Go to top

levelSeparation

The gap between each level.
Default value: 100
Code examples:
    $("#people").getOrgChart({			
        levelSeparation: 20,
        dataSource: [
	        { id: 1, parentId: null, Name: "Amber McKenzie"},
	        { id: 2, parentId: 1, Name: "Ava Field"},
	        { id: 3, parentId: 1, Name: "Evie Johnson"}]
    });
Edit in jsFiddle
Go to top

siblingSeparation

The gap between boxes in a subtree.
Default value: 30
Code examples:
    $("#people").getOrgChart({			
        siblingSeparation: 200,
        dataSource: [
	        { id: 1, parentId: null, Name: "Amber McKenzie"},
	        { id: 2, parentId: 1, Name: "Ava Field"},
	        { id: 3, parentId: 1, Name: "Evie Johnson"},
    	    { id: 4, parentId: 2, Name: "John"},
	        { id: 5, parentId: 2, Name: "Hugo"},
    	    { id: 6, parentId: 3, Name: "Sivan"},
	        { id: 7, parentId: 3, Name: "Arena"}]
    });
Edit in jsFiddle
Go to top

subtreeSeparation

The gap between subtrees.
Default value: 40
Code examples:
    $("#people").getOrgChart({			
        subtreeSeparation: 200,
        dataSource: [
	        { id: 1, parentId: null, Name: "Amber McKenzie"},
	        { id: 2, parentId: 1, Name: "Ava Field"},
	        { id: 3, parentId: 1, Name: "Evie Johnson"},
    	    { id: 4, parentId: 2, Name: "John"},
	        { id: 5, parentId: 2, Name: "Hugo"},
    	    { id: 6, parentId: 3, Name: "Sivan"},
	        { id: 7, parentId: 3, Name: "Arena"}]
    });
Edit in jsFiddle
Go to top

scale

The scale factor determines what fraction of the entire scale is visible at one time.
Default value: auto - all boxes will be visible and centerent.
Code examples:
    $("#people").getOrgChart({			
        scale: 0.5,
        dataSource: [
	        { id: 1, parentId: null, Name: "Amber McKenzie"},
	        { id: 2, parentId: 1, Name: "Ava Field"},
	        { id: 3, parentId: 1, Name: "Evie Johnson"}]
    });
Edit in jsFiddle

Methods

Go to top

createPerson

Creates new person.
Signature:
$([selector]).getOrgChart("createPerson", id, parentId, data);
Parameters:
  • id - The id of the person.
  • parentId - The parent id of the person. The value should be null if there is no parent.
  • data - JavaScript object that describes the person with properties. Each person can have different prperties. (Optional)
Code examples:
    $("#people").getOrgChart({ 
        theme: "vivian" 
    });
    
    $("#people").getOrgChart("createPerson", 1, null, {Name: "Amber McKenzie", Title: "CEO" });
    $("#people").getOrgChart("createPerson", 2, 1, {Name: "Ava Field", Title: "Paper goods machine setter", Phone: "079 0346 5377"});
    $("#people").getOrgChart("createPerson", 3, 1, {Name: "Evie Johnson", Title: "Employer relations representative"});
    
    $("#people").getOrgChart("draw");
Edit in jsFiddle
Go to top

updatePerson

Updates person by specified id.
Signature:
$([selector]).getOrgChart("updatePerson", id, pid, data);
Parameters:
  • id - The id of the person.
  • pid - The parent id of the person. .
  • data - JavaScript object that describes the person with properties. Each person can have different prperties. (Optional)
Code examples:
    $("#people").getOrgChart({	
        dataSource: [
            { id: 1, parentId: null, Name: "Amber McKenzie"},
            { id: 2, parentId: 1, Name: "Ava Field"},
            { id: 3, parentId: 1, Name: "Evie Johnson"}]
    });
    $("#people").getOrgChart("updatePerson", 2, 1, {Name: "New Name"});
Edit in jsFiddle
Go to top

removePerson

Removes person.
Signature:
$([selector]).getOrgChart("removePerson", id);
Parameters:
  • id - The id of the person.
Code examples:
    $("#people").getOrgChart({	
        theme: "vivian",
        dataSource: [
            { id: 1, parentId: null, Name: "Amber McKenzie"},
            { id: 2, parentId: 1, Name: "Ava Field"},
            { id: 3, parentId: 1, Name: "Evie Johnson"},
            { id: 4, parentId: 2, Name: "This Person will be removed"}]
    });
    $("#people").getOrgChart("removePerson", 4);
Edit in jsFiddle
Go to top

loadFromJSON

Load from json object.
Signature:
$([selector]).getOrgChart("loadFromJSON", jsonObj);
Parameters:
  • jsonObj - JSON object. The first two properties are the id and te parrent id.
Code examples:
    $('#people').getOrgChart({
        editable: false
    });
    $.getJSON("http://getorgchart.com/JsonInitialization/Read?callback=?", function(peopleJsonObj) {		
        $('#people').getOrgChart("loadFromJSON", peopleJsonObj);
    });
Edit in jsFiddle
Go to top

loadFromHTMLTable

Load from HTML table element.
Signature:
$([selector]).getOrgChart("loadFromHTMLTable", tableElement);
Parameters:
  • tableElement - HTML table element. The first two columns are the id and te parrent id.
Code examples:
    $('#people').getOrgChart({
        editable: false
    });
    $('#people').getOrgChart("loadFromHTMLTable", document.getElementById("peopleTable"));
Edit in jsFiddle
Go to top

loadFromXMLDocument

Load from HTML table element.
Signature:
$([selector]).getOrgChart("loadFromXMLDocument", xml);
Parameters:
  • xml - XML as string. Note that the XML does not contain id and parent id.
Code examples:
    $("#people").getOrgChart({	
        theme: "belinda",
        primaryColumns: ["name", "phone"],
        imageColumn: "image"
    });
    $("#people").getOrgChart("loadFromXMLDocument", $("#peoplexml").html());
Edit in jsFiddle
Go to top

showGridView

Shows grid view.
Signature:
$([selector]).getOrgChart("showGridView");
Parameters:
Code examples:
    $("#people").getOrgChart({	
        gridView: true,
        dataSource: [
            { id: 1, parentId: null, Name: "Amber McKenzie"},
            { id: 2, parentId: 1, Name: "Ava Field"},
            { id: 3, parentId: 1, Name: "Evie Johnson"}]
    });
    $("#people").getOrgChart("showGridView");
Edit in jsFiddle
Go to top

showDetailsView

Shows details view.
Signature:
$([selector]).getOrgChart("showDetailsView", id);
Parameters:
  • id - The id of the person.
Code examples:
    $("#people").getOrgChart({	
        gridView: true,
        dataSource: [
            { id: 1, parentId: null, Name: "Amber McKenzie", Image: "http://www.getorgchart.com/GetOrgChart/getorgchart-demos/images/f-5.jpg"},
            { id: 2, parentId: 1, Name: "Ava Field", Image: "http://www.getorgchart.com/GetOrgChart/getorgchart-demos/images/f-6.jpg"},
            { id: 3, parentId: 1, Name: "Evie Johnson", Image: "http://www.getorgchart.com/GetOrgChart/getorgchart-demos/images/f-7.jpg"}]
    });
    $("#people").getOrgChart("showDetailsView", 2);
Edit in jsFiddle
Go to top

showMainView

Shows main view.
Signature:
$([selector]).getOrgChart("showMainView");
Parameters:
Code examples:
    $("#people").getOrgChart({	
        gridView: true,
        dataSource: [
            { id: 1, parentId: null, Name: "Amber McKenzie"},
            { id: 2, parentId: 1, Name: "Ava Field"},
            { id: 3, parentId: 1, Name: "Evie Johnson"}]
    });
      
    $("#people").getOrgChart("showMainView");    
Edit in jsFiddle
Go to top

changeColorScheme

Shanges color scheme.
Signature:
$([selector]).getOrgChart("changeColorScheme", colorScheme);
Parameters:
  • colorScheme - One of the following predifined color schemes:
    • darkred
    • pink
    • darkorange
    • orange
    • lightgreen
    • green
    • lightteal
    • teal
    • lightblue
    • blue
    • darkpurple
    • purple
    • mediumdarkblue
    • darkblue
    • cordovan
    • darkcordovan
    • neutralgrey
    • black
Code examples:
    $("#people").getOrgChart({	
        theme: "lena",
        dataSource: [
            { id: 1, parentId: null, Name: "Amber McKenzie"},
            { id: 2, parentId: 1, Name: "Ava Field"},
            { id: 3, parentId: 1, Name: "Evie Johnson"}]
    });
      
    $("#people").getOrgChart("changeColorScheme", "lightgreen");    
Edit in jsFiddle
Go to top

draw

Drows actual FetOrgChart widget.
Signature:
$([selector]).getOrgChart("changeColorScheme", colorScheme);
Parameters:
Code examples:
    $("#people").getOrgChart({ 
        theme: "cassandra" 
    });
    
    $("#people").getOrgChart("createPerson", 1, null, {Name: "Amber McKenzie", Title: "CEO" });
    $("#people").getOrgChart("createPerson", 2, 1, {Name: "Ava Field", Title: "Paper goods machine setter", Phone: "079 0346 5377"});
    $("#people").getOrgChart("createPerson", 3, 1, {Name: "Evie Johnson", Title: "Employer relations representative"});
    
    $("#people").getOrgChart("draw");
Edit in jsFiddle
Go to top

zoom

Magnification method.
Signature:
$([selector]).getOrgChart("zoom", magnificationScale, animation);
Parameters:
  • magnificationScale - Magnification scale.
  • animation - boolean
Code examples:
    $("#people").getOrgChart({	
        theme: "belinda",
        dataSource: [
            { id: 1, parentId: null, Name: "Amber McKenzie"},
            { id: 2, parentId: 1, Name: "Ava Field"},
            { id: 3, parentId: 1, Name: "Evie Johnson"}]
    });
     $("#people").getOrgChart("zoom", 30, true);
Edit in jsFiddle
Go to top

move

Move method.
Signature:
$([selector]).getOrgChart("move", position);
Parameters:
  • position - "left", "right", "up" and "down".
Code examples:
    $("#people").getOrgChart({	
        dataSource: [
            { id: 1, parentId: null, Name: "Amber McKenzie"},
            { id: 2, parentId: 1, Name: "Ava Field"},
            { id: 3, parentId: 1, Name: "Evie Johnson"}]
    });
     $("#people").getOrgChart("move", "left");
Go to top

print

Print method.
Signature:
$([selector]).getOrgChart("print");
Parameters:
Code examples:
    $("#people").getOrgChart({	
        dataSource: [
            { id: 1, parentId: null, Name: "Amber McKenzie"},
            { id: 2, parentId: 1, Name: "Ava Field"},
            { id: 3, parentId: 1, Name: "Evie Johnson"}]
    });
     $("#people").getOrgChart("print");

Events

Go to top

removeEvent

Called before the remove method is invoked.
Parameters:
  • sender - The GetOrgChart object.
  • args.id - The id if the person.
  • args.returnValue - Set returnValue to false if you want to cancel the operation or return false if you are using callback approach.
Code examples:
Initialize the removeEvent with the create callback specified:
    $("#people").getOrgChart({	
        removeEvent: function( sender, args ) {} ,
        dataSource: [
            { id: 1, parentId: null, Name: "Amber McKenzie"},
            { id: 2, parentId: 1, Name: "Ava Field"},
            { id: 3, parentId: 1, Name: "Evie Johnson"}]
    });
Bind an event listener to the removeEvent event:
    $("#people").on("removeEvent", function( event, sender, args ) {} );
Edit in jsFiddle
Go to top

updateEvent

Called before the update method is invoked.
Parameters:
  • sender - The GetOrgChart object.
  • args.id - The id if the person.
  • args.parentId - Parent id.
  • args.data - Person properties.
  • args.returnValue - Set returnValue to false if you want to cancel the operation or return false if you are using callback approach.
Code examples:
Initialize the updateEvent with the create callback specified:
    $("#people").getOrgChart({	
        updateEvent: function( sender, args ) {} ,
        dataSource: [
            { id: 1, parentId: null, Name: "Amber McKenzie"},
            { id: 2, parentId: 1, Name: "Ava Field"},
            { id: 3, parentId: 1, Name: "Evie Johnson"}]
    });
Bind an event listener to the removeEvent event:
    $("#people").on("updateEvent", function( event, sender, args ) {} );
Edit in JSFiddle
Go to top

clickEvent

Called when the user clicks on a person box.
Parameters:
  • sender - The GetOrgChart object.
  • args.id - The id if the person.
  • args.parentId - Parent id.
  • args.data - Person properties.
  • args.returnValue - Set returnValue to false if you want to cancel the operation or return false if you are using callback approach.
Code examples:
Initialize the clickEvent with the create callback specified:
    $("#people").getOrgChart({	
        clickEvent: function( sender, args ) {} ,
        dataSource: [
            { id: 1, parentId: null, Name: "Amber McKenzie"},
            { id: 2, parentId: 1, Name: "Ava Field"},
            { id: 3, parentId: 1, Name: "Evie Johnson"}]
    });
Bind an event listener to the removeEvent event:
    $("#people").on("clickEvent", function( event, sender, args ) {} );
Edit in JSFiddle
Go to top

renderBoxContentEvent

Before the GetOrgChart can be rendered, each box in the control must be bound to a record in the data source. The renderBoxContentEvent event is raised when a data (represented by a GetOrgChart object) is bound to data in the GetOrgChart control. This enables you to provide an event-handling method that performs a custom routine, such as modifying the values of the data bound to the box or modifying the box html, whenever this event occurs.
Parameters:
  • sender - The GetOrgChart object.
  • args.id - The id if the person.
  • args.parentId - Parent id.
  • args.data - Person properties.
  • args.boxContentElements - Array of box content elements, add more elements if you want to change the html of the specified box.
Code examples:
Initialize the renderBoxContentEvent with the create callback specified:
    $("#people").getOrgChart({	
        renderBoxContentEvent: function( sender, args ) {} ,
        dataSource: [
            { id: 1, parentId: null, Name: "Amber McKenzie"},
            { id: 2, parentId: 1, Name: "Ava Field"},
            { id: 3, parentId: 1, Name: "Evie Johnson"}]
    });
Bind an event listener to the removeEvent event:
    $("#people").on("renderBoxContentEvent", function( event, sender, args ) {} );
Edit in JSFiddle