Org Chart Editor

Edit details:

This editable organizational chart sample color-codes the Nodes according to the tree level in the hierarchy.

Select a node to edit its data values. This sample uses the Data Inspector extension to display and modify Part data. Because this simple app is part of a static web site, there is no way to upload a photograph for a person.

Double click in the diagram background to add a new boss. That uses the ClickCreatingTool with a custom ClickCreatingTool.insertPart to scroll to the new node and start editing the TextBlock for its name .

Drag a node onto another in order to change relationships, if permitted. Right-click or tap-hold a Node to bring up a context menu that allows you to:

Add Employee - add a new person as a direct report to this person
Vacate Position - remove the information specfic to the current person in that role
Remove Role - removes the person entirely and changes the direct reports to report to the (former) boss
Remove Department - removes the person and whole subtree

To learn how to build an org chart from scratch with GoJS, see the Getting Started tutorial.

If you want to have some "assistant" nodes on the side, above the regular reports, see the Org Chart Assistants sample, which is a copy of this sample that uses a custom TreeLayout to position "assistants" that way.

Diagram Model saved in JSON format:

{ "class": "go.TreeModel",
  "nodeDataArray": [
{"key":1, "name":"Stella Payne Diaz", "title":"CEO", "pic":"1.jpg"},
{"key":2, "name":"Luke Warm", "title":"VP Marketing/Sales", "pic":"2.jpg", "parent":1},
{"key":3, "name":"Meg Meehan Hoffa", "title":"Sales", "pic":"3.jpg", "parent":2},
{"key":4, "name":"Peggy Flaming", "title":"VP Engineering", "pic":"4.jpg", "parent":1},
{"key":5, "name":"Saul Wellingood", "title":"Manufacturing", "pic":"5.jpg", "parent":4},
{"key":6, "name":"Al Ligori", "title":"Marketing", "pic":"6.jpg", "parent":2},
{"key":7, "name":"Dot Stubadd", "title":"Sales Rep", "pic":"7.jpg", "parent":3},
{"key":8, "name":"Les Ismore", "title":"Project Mgr", "pic":"8.jpg", "parent":5},
{"key":9, "name":"April Lynn Parris", "title":"Events Mgr", "pic":"9.jpg", "parent":6},
{"key":10, "name":"Xavier Breath", "title":"Engineering", "pic":"10.jpg", "parent":4},
{"key":11, "name":"Anita Hammer", "title":"Process", "pic":"11.jpg", "parent":5},
{"key":12, "name":"Billy Aiken", "title":"Software", "pic":"12.jpg", "parent":10},
{"key":13, "name":"Stan Wellback", "title":"Testing", "pic":"13.jpg", "parent":10},
{"key":14, "name":"Marge Innovera", "title":"Hardware", "pic":"14.jpg", "parent":10},
{"key":15, "name":"Evan Elpus", "title":"Quality", "pic":"15.jpg", "parent":5},
{"key":16, "name":"Lotta B. Essen", "title":"Sales Rep", "pic":"16.jpg", "parent":3}
 ]
}