{"id":1868,"date":"2017-08-21T11:47:14","date_gmt":"2017-08-21T11:47:14","guid":{"rendered":"http:\/\/mindfusion.eu\/blog\/?p=1868"},"modified":"2021-01-21T14:22:21","modified_gmt":"2021-01-21T14:22:21","slug":"org-chart-in-javascript-with-the-diagram-library","status":"publish","type":"post","link":"https:\/\/mindfusion.dev\/blog\/org-chart-in-javascript-with-the-diagram-library\/","title":{"rendered":"Org Chart in JavaScript with the Diagram Library"},"content":{"rendered":"

In this blog post we will use the Js Diagram library<\/a> to create a beautiful organizational chart, where people from the company are represented with the hierarchy links between them. Each employee has a photo, name, position, boss and section for comments. The links between them demonstrate the hierarchy.<\/p>\n

<\/p>\n

Run the sample from https:\/\/mindfusion.dev\/samples\/javascript\/diagram\/OrgChart\/OrgChartEditor.html<\/a><\/p>\n

I. Application Setup<\/strong><\/p>\n

We create a new folder for the project and there we copy the scripts that the sample uses. They are predominantly jQuery scripts, which you can also link from the jQuery CDN website.<\/a><\/p>\n

\"Org<\/a>

Org Chart in JavaScript: Directory Structure<\/p><\/div>\n

The samples.css and samples.js scripts are used by all MindFusion JavaScript samples and are not relevant to your application. They layout and style the HTML content.<\/p>\n

We need to create two files for this application \u2013 an HTML page and a JavaScript file that will be used by it. We create OrgChartEditor.html and link the following scripts and a CSS file in the section:<\/p>\n

<a<\/span> href<\/span>=\"http:\/\/common\/jquery.min.js<\/a>\">http:\/\/common\/jquery.min.js<\/a<\/span>>\n<\/span><a<\/span> href<\/span>=\"http:\/\/common\/jquery-ui.min.js<\/a>\">http:\/\/common\/jquery-ui.min.js<\/a<\/span>><\/pre>\n
Then we create an empty (for now) js file that will hold the code-behind for the web page. It is called OrgChartEditor.js. We must reference it, from the HTML but we will do that at the end, before the closing tag. That is done because some browsers might not load correctly the scripts if they are initialize before the HTML code for the canvas.<\/p>\n
<a<\/span> href<\/span>=\"http:\/\/MindFusion.Common.js<\/a>\">http:\/\/MindFusion.Common.js<\/a<\/span>>\n<\/span><a<\/span> href<\/span>=\"http:\/\/MindFusion.Diagramming.js<\/a>\">http:\/\/MindFusion.Diagramming.js<\/a<\/span>>\n<\/span><a<\/span> href<\/span>=\"http:\/\/OrgChartEditor.js<\/a>\">http:\/\/OrgChartEditor.js<\/a<\/span>><\/pre>\n
As you see, we have copied MindFusion.Common.js and MindFusion.Diagramming.js in the directory of the web page. There we have also saved OrgChartEditor.js.<\/p>\n
The diagram uses an HTML Canvas to render itself. We create one on the web page:<\/p>\n
<\/span><!-- The Diagram component is bound to the canvas element below --><\/span>\n<\/span><div<\/span> style<\/span>=\"width: 100%; height: 100%; overflow: auto;<\/a>\">\n<\/span>\t<canvas<\/span> id<\/span>=\"diagram<\/a>\" width<\/span>=\"2100<\/a>\" height<\/span>=\"2100<\/a>\">\n<\/span>\t\tThis page requires a browser that supports HTML 5 Canvas element.\n<\/span>\t<\/canvas<\/span>>\n<\/span><\/div<\/span>><\/pre>\n
Note that the element has an id. That\u2019s important because we will reference it in the code behind file.<\/p>\n
II. The OrgChartNode.<\/strong><\/p>\n
Each employee on the diagram is represented by a special node \u2013 the OrgChartNode. This node is a customized TableNode.<\/a><\/p>\n
\/\/ creates a table node with the default settings\nvar OrgChartNode = function (parent, boss)\n{\n       AbstractionLayer.initializeBase(OrgChartNode, this, [parent]);\n\n       this.childNodes = [];\n\n\t\/\/ set up table cells\n\tthis.redimTable(3, 4);\n\tthis.getCell(1, 3).setColumnSpan(2);\n\tthis.getCell(0, 0).setRowSpan(4);\n\tthis.getCell(1, 1).setText(\"Title:\");\n\tthis.getCell(1, 1).setFont(\n            new Font(\"Verdana\", 3.5, true \/*bold*\/, false \/*italic*\/));\n\tthis.getCell(1, 2).setFont(\n            new Font(\"Verdana\", 3.5, true \/*bold*\/, false \/*italic*\/));\n\tthis.getCell(1, 0).setFont(\n            new Font(\"Verdana\", 3.5, true \/*bold*\/, false \/*italic*\/));\n\tthis.getCell(1, 3).setFont(\n            new Font(\"Verdana\", 3, false \/*bold*\/, false \/*italic*\/));\n\tthis.configureCells();\n<\/pre>\n
Each OrgChartNode has a parent and a boss. The CEO, which is the topmost node in the hierarchy has no boss. The OrgChartNode is a TableNode with 3 columns and four rows. Cell(0,0) is reserved for the image of the employee. It spans 4 rows.<\/p>\n
The cells in the second column with index 1 are for labels: title, name, id and comments. We style them with bold font.<\/p>\n
The prototype of the OrgChartNode gets or sets the properties which deal with the data we need for each employee. We set the fields for each new node and update the existing canvas elements. We define an updateCanvasElements method that calls the updateCanvasElements<\/a> of the parent class to mark the changes. We also declare setter\/getter methods for each OrgChartNode field:<\/p>\n
OrgChartNode.prototype =\n{\n\t\/\/ updates the existing elements\n\tupdateCanvasElements: function (node)\n\t{\n\t\tthis.setFields();\n\t\tAbstractionLayer.callBaseMethod(OrgChartNode, this, 'updateCanvasElements');\n\t},\n\n        \/\/ gets the title of the employee\n\tgetTitle: function ()\n\t{\n\t\treturn this.title;\n\t},\n        \/\/ sets the title of the employee\n\tsetTitle: function (value)\n\t{\n\t\tif (this.title !== value)\n\t\t{\n\t\t\tthis.title = value;\n\t\t\tthis.invalidate();\n\t\t}\n\t},\n<\/pre>\n
When we set a new value we invalidate the canvas so that the changes can be rendered correctly on the screen.<\/p>\n
\/\/ assigns the employee data to the table cells\nsetFields: function()\n{\n    \/\/ hide the caption and place the employee names on row 0 \n    this.setCaptionHeight(0);\n    this.getCell(1,0).setText(\"Name:\")\n    this.getCell(2,0).setText(this.fullName);\n    \u2026.\n    \u2026.\n    \u2026..\n    \/\/ rearrange the org hierarchy\n    this.setHierarchy();\n    this.setColor();\n},\n<\/pre>\n
The setFields method takes the data from the OrgChartNode fields and assigns it to the correct cells of the table. It also assigns the correct boss of the employee. In our samples bosses are assigned automatically and cannot be edited by the user. This is done by the setHierarchy method:<\/p>\n
\/\/ rebuilds the hierarchy\nsetHierarchy: function ()\n{\n    \/\/ the ceo has no boss\n    if (this.boss == undefined)\n\t{\n\t   this.hierarchy = 0;\n\t}\n\telse\n\t {\n             \/\/ first level of executives under the boss\n\t     if (this.boss.hierarchy == undefined)\n\t     {\n\t\t  this.hierarchy = 1;\n\t     }\n\t     else\n\t     {\n\t         \/\/ increase the depth of the hierarchy\n\t\t this.hierarchy = this.boss.hierarchy + 1;\n\t\t this.boss.addChild(this);\n\t\t}\n\t  }\n         \n         \/\/ rearrange the hierarchy\n\t for (var i = 0; i < this.childNodes; i++)\n\t\tthis.childNodes[i].setHierarchy();\n\t\tthis.setColor();\n},\n<\/pre>\n
The setColor method assigns the right color for the background of the table. Different levels in the hierarchy are distinguished by different colors. The top level \u2013 the CEO \u2013 is read.<\/p>\n
III. Interaction<\/strong><\/p>\n
The org chart allows the users to do a lot of things: edit certain table cells, delete and create nodes, create and delete links, move and drag the nodes. This is done by handling a lot of events that the diagram library exposes.<\/p>\n
First, we set the Behavior<\/a> property of the diagram to \u201cCustom\u201d.<\/a> This means we will define how the library responds to user actions. This is done because none of the predefined Behavior modes answer the specific needs of our application:<\/p>\n
diagram.setBehavior(Behavior.Custom);\n<\/pre>\n
Then we start handling events. First, we handle the Clicked<\/a> event:<\/p>\n
diagram.addEventListener(Event.clicked, function (diagram, eventArgs)\n{\n     \/\/ check which mouse button was clicked\n     var button = eventArgs.getMouseButton();\n     var position = eventArgs.getMousePosition();\n\n     \u2026.\n});\n<\/pre>\n
We handle differently clicks with the right and left mouse buttons. If it is the right mouse button we should create a new OrgChartNode:<\/p>\n
\/\/ click with the right mouse button creates a node\nif (button === 2)\n{\n\tvar node = new OrgChartNode(diagram, undefined);\n\tnode.setBounds(new Rect(position.x, position.y, 20, 20));\n\tnode.resize();\n\n\t\/\/ adds the node to the diagram items\n\tdiagram.addItem(node);\n\n\t\/\/ rearrange the diagram\n\tdiagram.arrangeAnimated(tree);\n}\n<\/pre>\n
Initially, the node has no boss, it will be determined once we link it to the rest of the org chart.<\/p>\n
Let\u2019s see what happens when the users clicks on a node:<\/p>\n
diagram.addEventListener(Event.nodeClicked, onNodeClicked);\n<\/pre>\n
We handle the nodeClicked event with the onNodeClicked method:<\/p>\n
\/\/ raised when the user clicks on a node\nfunction onNodeClicked(diagram, eventArgs)\n{\n\t\/\/ checks if the user has clicked with the left mouse button (0)\n\tvar button = eventArgs.getMouseButton();\n\tif (button === 0)\n\t\teditNode(diagram, eventArgs);\n\n        \/\/click with the right mouse button creates a node\n        else if (button === 2)\n        createNode(diagram, eventArgs);\n}\n<\/pre>\n
When the node is clicked with the left mouse button \u2013 we edit it. When it is clicked with the right one \u2013 we create a new node, linked to it, one level deeper into the hierarchy.<\/p>\n
\/\/ called when the user edits a table\nfunction editNode(diagram, eventArgs)\n{\n     var cellEditor = eventArgs.getNode().cellFromPoint(eventArgs.getMousePosition());\n\n     \/\/ the table node to edit\n     var tableNode = eventArgs.getNode();\n     ...\n     ...\n}\n<\/pre>\n
We use the cellFromPoint<\/a> method to identify the cell that was clicked. The cells that cannot be edited \u2013 the ones that render the labels \u2013 have no cellEditor.<\/p>\n
\/\/ cells that cannot be edited have no cellEditor assigned\nif (cellEditor.cell != undefined)\n       if(cellEditor.cell.editable == true)\n\t   edit = true;\n<\/pre>\n
If the cell can be edited we check which is the cell and what type of content it renders:<\/p>\n
\/\/ if the cell can be edited\nif (edit)\n{\n\tdiagram.beginEdit(eventArgs.getNode(),eventArgs.getMousePosition());\n\t$(\"diagram_inplaceInput\").attr(\"placeholder\", \"url\");\n\n\tcellEditor.cell.onEdited = function (diagram, tableCell)\n\t{\n\t\tif (edit)\n\t\t{\n\t\t\tif (cellEditor.cell.image)\n\t\t\t{\n\t\t\t\t\/\/ read and assign the URL of the new image\n\t\t\t\tif (tableCell.getNewText() != undefined &&\n\t\t\t\t\ttableCell.getNewText() != \"\" &&\n\t\t\t\t\ttableCell.getNewText != \"undefined\")\n\t\t\t\t{\n\t\t\t\ttableNode.setImageLocation(tableCell.getNewText());\n\t\t\t\tcellEditor.cell.text.height = 0;\n\t\t\t\tcellEditor.cell.text.text = \"\";\n\t\t\t\t}\n\t\t\t}\n              .....\n}\n<\/pre>\n
In the code above we check to see if the image location is correctly set and if so \u2013 we read the new image from the url and render it in the cell.<\/p>\n
Handling the other events is easier, let\u2019s look at the event fired when cell text is edited:<\/p>\n
\/\/add an eventListener for the cellTextEdited event\ndiagram.addEventListener(Event.cellTextEdited, function (diagram, cellArgs)\n{\n   cellArgs.getCell().onEdited(diagram, cellArgs);\n});\n<\/pre>\n
Here we just call the onEdited method of the cell that is edited, which we explained above. The samples handles this way a lot of events: nodeDeleted, linkCreated, nodeModified and many more. You can check them in the source code provided with the sample.<\/p>\n
IV. Diagram Layout<\/strong><\/p>\n
The org chart uses the predefined TreeLayout<\/a> to arrange the diagram. It is ideal for hierarchical types of charts because it neatly arranges all nodes from a given level in a row\/column based on the direction set.<\/p>\n
\/\/ we apply the tree layout to arrange the diagram\ntree = new MindFusion.Graphs.TreeLayout();\n\n\/\/ customize the tree layout\ntree.direction = MindFusion.Graphs.LayoutDirection.TopToBottom;\ntree.linkType = MindFusion.Graphs.TreeLayoutLinkType.Cascading;\n<\/pre>\n
The TreeLayout is animated:<\/p>\n
\/\/ rearrange the diagram\ndiagram.arrangeAnimated(tree); \n<\/pre>\n
It is called not only at the beginning but also each time a new node is created or deleted, link is created and\/or deleted as well when link or node is edited.<\/p>\n
V. New Nodes<\/strong><\/p>\n
Finally, let\u2019s see how nodes are created in code:<\/p>\n
var ctoNode = new OrgChartNode(diagram, ceoNode);\nctoNode.setBounds(new Rect(25, 55, 60, 25));\nctoNode.setBoss(ceoNode);\nctoNode.setTitle(\"CTO\");\nctoNode.setFullName(\"Bob Smith\");\nctoNode.setImageLocation(\"cto.png\");\nctoNode.setComment(\"A great person!\");\nctoNode.resize();\ndiagram.addItem(ctoNode);\n<\/pre>\n
New nodes, as you already know are created by the user with a right mouse button click on any node. If a link is deleted, the node is detached from the hierarchy and the user should drop it over an existing node to indicate its place in the hierarchy.<\/p>\n
With this we finish our sample. We have presented you with the most important information on how this org chart in JavaScript is created. You can download the complete source code of the sample from this link:<\/p>\n
Download MindFusion JavaScript Organizational Chart Sample<\/a><\/p>\n
The sample is also available on GitHub at https:\/\/github.com\/MindFusionComponents\/JavaScript-Diagram-Samples\/tree\/master\/OrgChart<\/a><\/p>\n
The sample is available online at https:\/\/mindfusion.dev\/samples\/javascript\/diagram\/OrgChart\/OrgChartEditor.html<\/a><\/p>\n
Find out more about MindFusion JavaScript Diagram Library at https:\/\/mindfusion.dev\/javascript-diagram.html<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
In this blog post we will use the Js Diagram library to create a beautiful organizational chart, where people from the company are represented with the hierarchy links between them. Each employee has a photo, name, position, boss and section … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[95,74],"tags":[482,80,441,480,481],"class_list":["post-1868","post","type-post","status-publish","format-standard","hentry","category-diagramming-2","category-sample-code","tag-dynamic-flowchart-in-javascript","tag-javascript","tag-javascript-flowchart","tag-javascript-org-chart","tag-organizational-javascript-chart"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p3RlKs-u8","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/1868","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/comments?post=1868"}],"version-history":[{"count":9,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/1868\/revisions"}],"predecessor-version":[{"id":2625,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/1868\/revisions\/2625"}],"wp:attachment":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/media?parent=1868"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/categories?post=1868"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/tags?post=1868"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}