js-orgChart

Javascript Organizational Chart

About

Based on Surnfu's organization.js and expansion feature for draw organizational chart.

V2 version with an example is available here.

Usage

<script language="javascript" src="js-orgchart.js"></script>
<link rel="stylesheet" type="text/css" href="js-orgchart.css">
<div id="OrgChart"></div>
<script>
var tOptions = new OrgOptions();
var tStyleSheet = new OrgStyleSheet();
var ogChart = new OrgChart();
ogChart.Options = tOptions;
ogChart.StyleSheet = tStyleSheet;
ogChart.Render();
</script>

Options

var tOptions = new OrgOptions();
tOptions.AutoPos = true;
tOptions.Top = 8;
tOptions.Left = 20;
tOptions.paddingOffsetTop = 0;
tOptions,paddingOffsetLeft = 0;
tOptions.IntervalWidth = 100;
tOptions.IntervalHeight = 60;
tOptions.LineColor = "#3388dd";
tOptions.LineSize = 1;
tOptions.EdgeTemplet = "<div id=\"{Id}\" class=\"OrgEdge\"><span>{Caption}</span><div>{Description}</div></div>";

StyleSheet

var tStyleSheet = new OrgStyleSheet();
tStyleSheet.CssText = "";

Event

var ogChart = new OrgChart();
ogChart.NodeOnClick = function() {};
ogChart.NodeOnMouseMove = function() {};
ogChart.NodeOnMouseOver = function() {};
ogChart.NodeOnMouseOut = function() {};
ogChart.DepthOnProcess = function(Depths, n) {};

Google Organizational Chart Data Supported

var tGoogleData = [
          [{v:'Mike', f:'Mike<div style="color:red; font-style:italic">President</div>'}, '', 'The President'],
          [{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'}, 'Mike', 'VP'],
          ['Alice', 'Mike', ''],
          ['Bob', 'Jim', 'Bob Sponge'],
          ['Carol', 'Bob', '']];
 
tRootNode = LoadGoogleOrgChartData(tGoogleData);

Google Chart

You can view a demo of this here.

Author

* 2013 rchockxm (rchockxm.silver@gmail.com) * 2009 Surnfu composition (Surnfu@126.com)

Credits

* Surnfu - core * yifeng - getElementPosLeft, getElementPosTop