Wednesday, March 19, 2014

How to create an organizational chart in your webpage using GetOrgChart

If you want a quick and easy way to churn out a simple organizational chart that displays on a webpage, this tool is quite useful.




To use it, follow these few steps:


Step 1: Download GetOrgChart and add GetOrgChart files in your project


Step 2: Include this tag in your <head> tag in your HTML file
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>    
<script src="/getorgchart-1.1/getorgchart.js"></script>    
<link href="/getorgchart-1.1/getorgchart.css" rel="stylesheet" />



Step 3:  Define  the <div> tag that will contain the chart inside <body> tag

<div id="people"></div>




Step 4:  Add the folloing javascript
$("#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"}]
});

1 comment:

  1. This is truly a decent and enlightening, furthermore greatly affects the new innovation. A debt of gratitude is in order for sharing it
    pharma company org charts

    ReplyDelete