Halo lagi,

Udah lama gak kontribusi apa pun ke thread ini. Kali ini saya mau sharing pengalaman membuat organization chart dengan Javascript. Saya udah lama banget nyari library Javascript buat bikin organization chart. Udah banyak library yang saya sambangi, tapi gagal nemu yang cocok dengan kebutuhan saya.

Awalnya pilihan saya jatuh ke d3.js. Library ini punya banyak pilihan chart berbentuk "tree", tapi tidak ada yang bentuknya top-down layaknya organization chart. Berbagai varian "tree" yang ditawarkan d3.js bentuknya menyamping.

Library lain adalah SpaceTree dari The JIT. Walaupun tidak sekaya d3.js, modul SpaceTree pada library ini memiliki fitur yang memadai untuk membuat chart berbentuk "tree". SpaceTree dari The JIT ini bentuknya sudah top-down, tapi sayangnya bentuknya kurang formal. Contohnya adalah garis penghubung antar-node bentuknya melengkung dan bukan garis siku.

Emang sih bukan gak mungkin setiap Javascript itu saya oprek sendiri, tapi rasanya gak sreg aja kalau harus reinvent the wheel. Jadi pilihannya kembali ke Google. Entah karena perbedaan keyword atau memang ada search result baru yang saya temukan di googling berikutnya, akhirnya saya menemukan jOrgChart.

jOrgChart ini benar-benar sesuai kebutuhan untuk membuat organization chart secara dinamis. Bentuknya top-down, tampilannya formal, dan perubahan tampilan chart-nya dapat diatur secara leluasa lewat file CSS. Jadi kita masih bisa merubah warna node, ukuran node, dan berbagai pernak-pernik lainnya.

Library jOrgChart dapat diakses di sini: github.com/wesnolte/jOrgChart. Saya langsung saja buat fork-nya dan melakukan modifikasi kecil ke bagian "example"-nya untuk membuat contoh yang lebih sederhana terkait penggunaan jOrgChart. Modifikasi kecil saya dapat diakses di fork yang saya buat: github.com/asyafrudin/jOrgChart. File yang saya tambahkan adalah "example/example-modified.html" dan "example/css/jquery.jOrgChart-mod.css" yang merupakan hasil modifikasi dari file-file aslinya.

Bersambung...