Membuat Organizational Chart dengan Javascript

Terkadang kita dipusingkan saat membuat aplikasi berbasis web yang didalamnya terdapat suatu unsur organizational tree. Organizational tree merupakan salah satu diagram yang merepresentasikan suatu jabatan atau tingkatan. Misalnya saja seperti tingkatan dalam suatu organisasi. Dimana didalam organisasi tersebut terdapat beberapa tingkatan, seperti ketua yang berada dalam tingkatan paling atas, lalu ada sekretaris, bendahara dan seksi-seksi lainnya yang berada di bawah ketua. Untuk membuat organizational tree ini kita bisa memanfaatkan salah satu library javascript yang bernama “ECOTree”.

Contoh Tree

Dengan menggunakan library ini, kita dimudahkan dalam membuat organizational tree. ECOTree ini adalah library javascript yang free seperti library javascript lainnya. Jadi kita tidak perlu merogoh kocek untuk menggunakannnya. Berikut ini adalah langkah-langkah dalam membuat organizational tree dengan menggunakan library “ECOTree”.Anda dapat mendownload file contoh disini.

1. Sebelum menulis kode javascript, kita diharuskan untuk mengimport file yang dibutuhkan seperti ECOTree.js dan ECOTree.css. ECOTree.js adalah library javascript-nya, sedangkan ECOTree.css adalah file css yang menangani tampilan/view dari organizational tree.

2. Setelah mengimport file yang diperlukan, langkah berikutnya adalah membuat namespace dan style css-nya.

	<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>

		<style>v\:*{ behavior:url(#default#VML);}</style>

		<style>

			.copy {

				font-family : "Verdana";

				font-size : 10px;

				color : #CCCCCC;

			}

	</style>

3. Selanjutnya adalah yang bagian terpenting, yakni membuat kode javascript yang berada didalam file html. Kode javascript harus diletakkan diantara tag <script type=”text/javascript”> dan     </script>. Didalam kode javascript ini ada beberapa langkah untuk membuat organizational tree, diantaranya sebagai berikut.

• Pendeklarasian variable  dengan value “null”

var tree = null;

• Pembuatan function javascript dengan nama CreateTree()

function CreateTree(){
			// beberapa kode javascript
			}

• Konfigurasi organizational tree. Seperti tipe tree, warna node default, ukuran node default. Konfigurasi ini harus diletakkan dalam lingkup function CreateTree().

function CreateTree(){
//config standar dalam membuat tree
var tree = null;
				tree = new ECOTree('t','contoh');

				tree.config.iRootOrientation = ECOTree.RO_TOP;

				tree.config.defaultNodeWidth = 150;

				tree.config.defaultNodeHeight = 100;

				tree.config.iSubtreeSeparation = 20;

				tree.config.iSiblingSeparation = 10;

				tree.config.useTarget = false;

				tree.config.nodeFill = ECOTree.NF_GRADIENT;

				tree.config.colorStyle = ECOTree.CS_LEVEL;

				tree.config.levelColors = ["#966E00","#BC9400","#D9B100","#FFD700"];

				tree.config.levelBorderColors = ["#FFD700","#D9B100","#BC9400","#966E00"];

				tree.config.nodeColor = "#FFD700";

				tree.config.nodeBorderColor = "#FFD700";

				tree.config.linkColor = "#FFD700";
				//akhir config
}

• Pembuatan tiap-tiap node(titik bagian). Formatnya adalah : nama_variable.add([id],[id_induk],[konten]); . Untuk id, paling tidak harus berbeda dengan lainnya.             Sedangkan untuk id_induk boleh sama seperti node lainnya, tergantung induknya. Misalnya saja node ketua mempunyai id=2 dan id_induk = -1(untuk node paling atas,             id_induknya harus = -1), maka bendahara, sekretaris dll. harus diberi id_induk = 2, karena itu adalah id dari ketua. Untuk contoh ini, saya tidak menggunakan             perumpamaan ketua dan jabatan lainnya, namun menggunakan representasi kebutuhan manusia. Kode ini harus diletakkan dalam lingkup function CreateTree().

function CreateTree(){

/**
Letakkan Config disini
*/

//script untuk menambah node
				tree.add(1,-1,"Kebutuhan Manusia");

				//node dengan induk yang ber-id = 1
				tree.add(2,1,"Sandang");
				tree.add(3,1,"Pangan");
				tree.add(4,1,"Papan");

				//node dengan induk yang ber-id  = 2
				tree.add(5,2,"Baju");
				tree.add(6,2,"Jaket");
				tree.add(7,2,"Celana");

				//node dengan induk yang ber-id = 3
				tree.add(8,3,"Makanan");
				tree.add(9,3,"Minuman");

				//node dengan induk yang ber-id = 4
				tree.add(10,4,"Rumah");
				tree.UpdateTree();
				//akhir script penambahan node
}

4. Setelah membuat kode javascript, maka langkah selanjutnya ialah membuat tag <div> yang mempunyai id sesuai kode javascript tersebut. Tag <div> ini harus diletakkan dalam tag   <body>.

	<h3>Contoh Organizational Chart</h3>

	<div id="contoh">
	</div>

5. Selesai juga beberapa langkah dalam pembuatan organizational tree ini. Anda bisa melihatnya sendiri hasilnya dalam browser. Atau bila masih belum berhasil anda bisa    mendownload file contoh disini (Rename dari ekstensi .doc menjadi ekstensi .zip). Terima kasih.

Advertisements