Options

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
  • sara
  • belinda
  • cassandra
  • deborah
  • lena
  • monica
  • ula
  • eve
  • tal
  • vivian
  • ada
  • helen
Default value: "ula"
Code examples:
    var orgchart = new getOrgChart(document.getElementById("people"), {			
        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
Default value: "blue"
Code examples:
        var orgchart = new getOrgChart(document.getElementById("people"),{			
            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

enableEdit

Sets a value that indicates whether GetOrgChart widget can be edited.
Default value: true
Code examples:
        var orgchart = new getOrgChart(document.getElementById("people"),{			
            enableEdit: 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

enableZoom

Sets a value that indicates whether GetOrgChart widget can be magnified.
Default value: true
Code examples:
        var orgchart = new getOrgChart(document.getElementById("people"),{			
            enableZoom: 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

enableSearch

Enables advanced search.
Default value: true
Code examples:
        var orgchart = new getOrgChart(document.getElementById("people"),{			
            enableSearch: 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

enableMove

Specifies whether the GetOrgChart pane can be moved by the user.
Default value: true
Code examples:
        var orgchart = new getOrgChart(document.getElementById("people"),{			
            enableMove: 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

enableGridView

Specifies whether the GetOrgChart has grid view mode.
Default value: false
Code examples:
        var orgchart = new getOrgChart(document.getElementById("people"),{			
            enableGridView: 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

enableDetailsView

Specifies whether the GetOrgChart has details view mode.
Default value: true
Code examples:
        var orgchart = new getOrgChart(document.getElementById("people"),{			
            enableDetailsView: 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

enablePrint

Enables printing.
Default value: false
Code examples:
        var orgchart = new getOrgChart(document.getElementById("people"),{			
            enablePrint: 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

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:
        var orgchart = new getOrgChart(document.getElementById("people"),{			
            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
Go to top

linkType

The GetOrgChart widget has a wealth of predefined link types.
  • M
  • B
Default value: "B"
Code examples:
        var orgchart = new getOrgChart(document.getElementById("people"),{			
            linkType: "B",
            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:
        var orgchart = new getOrgChart(document.getElementById("people"),{			
            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

primaryFields

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:
        var orgchart = new getOrgChart(document.getElementById("people"),{			
                primaryFields: ["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

photoFields

photoFields property specifies an image that is displayed in the image box.
Default value: ["Image"]
Code examples:
     var orgchart = new getOrgChart(document.getElementById("people"),{					
        photoFields: ["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

idField

idField property specifies the id property in the data source. If not specified the id is the first property of the data source
Default value: null
Code examples:
     var orgchart = new getOrgChart(document.getElementById("people"),{					
        idField: "Key",
        dataSource: [
	        { Key: 1, parentKey: null, Name: "Amber McKenzie"},
	        { Key: 2, parentKey: 1, Name: "Ava Field" },
	        { Key: 3, parentKey: 1, Name: "Evie Johnson"}]
    });
Edit in jsFiddle
Go to top

parentIdField

parentIdField property specifies the parent id property in the data source. If not specified the parent id is the second property of the data source
Default value: null
Code examples:
     var orgchart = new getOrgChart(document.getElementById("people"),{					
        idField: "Key",
        parentIdField: "parentKey",
        dataSource: [
	        { Key: 1, parentKey: null, Name: "Amber McKenzie"},
	        { Key: 2, parentKey: 1, Name: "Ava Field" },
	        { Key: 3, parentKey: 1, Name: "Evie Johnson"}]
    });
Edit in jsFiddle
Go to top

levelSeparation

The gap between each level.
Default value: 100
Code examples:
    var orgchart = new getOrgChart(document.getElementById("people"),{			
        levelSeparation: 200,
        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:
    var orgchart = new getOrgChart(document.getElementById("people"),{			
        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:
     var orgchart = new getOrgChart(document.getElementById("people"),{					
        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

embededDefinitions

Allows graphical objects to be defined for later reuse.
Default value: ""
Code examples:
     var markerArrow = " ";
     var orgchart = new getOrgChart(document.getElementById("people"),{					
        embededDefinitions: markerArrow,
        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

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.
    var orgchart = new getOrgChart(document.getElementById("people"),{
        dataSource: document.getElementById("orgChartTable") //orgChartTable is tableHTMLElement
    });
Initialize from XML. For more details open this demo and hit the button in the top right corner to see the HTML code. XML file.
    var orgchart = new getOrgChart(document.getElementById("people"),{
        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.
     var orgchart = new getOrgChart(document.getElementById("people"),{
        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

customize

You can customize the color or theme on a specific box (node). For more details open this demo and hit the button in the top right corner to see the HTML code.
Default value: empty - all boxes are with the same color and theme.
Code examples:
         var orgChart = new getOrgChart(document.getElementById("people"), {
            theme: "monica",
            primaryFields: ["name", "title"],
            photoFields: ["image"],
            gridView: true,
            linkType: "B",
            dataSource: [
                { id: 1, parentId: null, name: "Amber McKenzie", title: "CEO", phone: "678-772-470", mail: "lemmons@jourrapide.com", adress: "Atlanta, GA 30303", image: "images/f-11.jpg" },
                { id: 2, parentId: 1, name: "Ava Field", title: "Paper goods machine setter", phone: "937-912-4971", mail: "anderson@jourrapide.com", image: "images/f-22.jpg" },
                { id: 3, parentId: 1, name: "Evie Johnson", title: "Employer relations representative", phone: "314-722-6164", mail: "thornton@armyspy.com", image: "images/f-24.jpg" },
                { id: 6, parentId: 2, name: "Rebecca Randall", title: "Optometrist", phone: "801-920-9842", mail: "JasonWGoodman@armyspy.com", image: "images/f-8.jpg" },
                { id: 7, parentId: 2, name: "Spencer May", title: "System operator", phone: "Conservation scientist", mail: "hodges@teleworm.us", image: "images/f-7.jpg" },
                { id: 8, parentId: 3, name: "Max Ford", title: "Budget manager", phone: "989-474-8325", mail: "hunter@teleworm.us", image: "images/f-6.jpg" },
                { id: 9, parentId: 3, name: "Riley Bray", title: "Structural metal fabricator", phone: "479-359-2159", image: "images/f-3.jpg" }
            ],
            customize: {
                "1": { color: "green" },
                "2": { theme: "deborah" },
                "3": { theme: "deborah", color: "darkred" }
            }
        });
Go to top

expandToLevel

Expand first n level of the chart
Default value: 3.
Code examples:
     var orgchart = new getOrgChart(document.getElementById("people"),{
        expandToLevel: 2,
        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

insertNode

Insert new node.
Signature:
orgchart.insertNode(parentId);
Parameters:
  • parentId - The parent id of the node.
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

Events

Go to top

clickNodeEvent

On click interaction.
Parameters:
  • sender - The GetOrgChart object.
  • args.node - The clicked node.
Code examples:
        var orgchart = new getOrgChart(document.getElementById("people"), {
            clickNodeEvent: clickHandler,   
            dataSource: [{id: 1,parentId: null,Name: "Amber McKenzie"}, {id: 2,parentId: 1,Name: "Ava Field"}, {id: 3,parentId: 1,Name: "Evie Johnson"}]
        });

        function clickHandler(sender, args) {
          alert("clecked node.id " + args.node.id);
        }

Edit in jsFiddle
Go to top

renderNodeEvent

On render node.
Parameters:
  • sender - The GetOrgChart object.
  • args.node - The node.
  • args.content - Array of svg elements that can be modified.
Code examples:
    var orgchart = new getOrgChart(document.getElementById("people"), {
        renderNodeEvent: renderNodeEvent,
        dataSource: [{id: 1,parentId: null,Name: "Amber McKenzie"}, {id: 2,parentId: 1,Name: "Ava Field"}, {id: 3,parentId: 1,Name: "Evie Johnson"}]
    });
    function renderNodeEvent(sender, args) {
        args.content[2] = args.content[2].replace("Amber McKenzie", "The name has been replaced");
    }
Edit in jsFiddle
Go to top

removeNodeEvent

On delete node.
Parameters:
  • sender - The GetOrgChart object.
  • args.id - The id of the node.
Code examples:
    var orgchart = new getOrgChart(document.getElementById("people"), {
        removeNodeEvent: removeNodeEvent,
        dataSource: [{id: 1,parentId: null,Name: "Amber McKenzie"}, {id: 2,parentId: 1,Name: "Ava Field"}, {id: 3,parentId: 1,Name: "Evie Johnson"}]
    });
    function removeNodeEvent(sender, args) {
    	if (args.id == 1){
      	return false;
      }
    }

Edit in jsFiddle
Go to top

updateNodeEvent

On update node.
Parameters:
  • sender - The GetOrgChart object.
  • args.node - The node.
Code examples:
    var orgchart = new getOrgChart(document.getElementById("people"), {
        updateNodeEvent: updateNodeEvent,
        dataSource: [{id: 1,parentId: null,Name: "Amber McKenzie"}, {id: 2,parentId: 1,Name: "Ava Field"}, {id: 3,parentId: 1,Name: "Evie Johnson"}]
    });
    function updateNodeEvent(sender, args) {
    	args.node.data["Name"] = "Test";
      //return false; 
        //return fasle if you want to cancel the event
    }
Edit in jsFiddle
Go to top

insertNodeEvent

On insert node.
Parameters:
  • sender - The GetOrgChart object.
  • args.node - The node.
Code examples:
    var orgchart = new getOrgChart(document.getElementById("people"), {
        insertNodeEvent: insertNodeEvent,
        dataSource: [{id: 1,parentId: null,Name: "Amber McKenzie"}, {id: 2,parentId: 1,Name: "Ava Field"}, {id: 3,parentId: 1,Name: "Evie Johnson"}]
    });
    function insertNodeEvent(sender, args) {
    	args.node.data["Name"] = "Test";
      //return false; 
      //return fasle if you want to cancel the event
    }
Edit in jsFiddle
Go to top

createNodeEvent

On create node.
Parameters:
  • sender - The GetOrgChart object.
  • args.node - The node.
Code examples:
    var orgchart = new getOrgChart(document.getElementById("people"), {
        createNodeEvent: createNodeEvent,
        dataSource: [{id: 1,parentId: null,Name: "Amber McKenzie"}, {id: 2,parentId: 1,Name: "Ava Field"}, {id: 3,parentId: 1,Name: "Evie Johnson"}]
    });
    function createNodeEvent(sender, args) {
        if (args.node.id == 2){
      	    return false; 
      	    //return fasle if you want to cancel the event
        }
      
        if (args.node.id == 1){
    		args.node.data["Name"] = "The name has been modified";
        }
    }
Edit in jsFiddle
Go to top

updatedEvent

Called after insertNodeEvent, removeNodeEvent and updateNodeEvent.
Parameters:
  • sender - The GetOrgChart object.
Code examples:
    var orgchart = new getOrgChart(document.getElementById("people"), {
        updatedEvent: updatedEvent,
        dataSource: [{id: 1,parentId: null,Name: "Amber McKenzie"}, {id: 2,parentId: 1,Name: "Ava Field"}, {id: 3,parentId: 1,Name: "Evie Johnson"}]
    });
    function updatedEvent(sender, args) {
      alert("updatedEvent")
    }
Edit in jsFiddle