Friday, December 5, 2008

Google Visualization API : Organizational Chart

It's possible display the relationship of your company employees using the Google Visualization: Organizational Chart.

How it works:
I use jQuery AJAX to call an application process called GET_EMPLOYEES_RELATIONSHIP.
The response is in JSON. I use jQuery to handle the JSON object.
You need to store your chart data inside a "google.visualization.DataTable()" object.
I use the same data table to feed the Table Chart and the Org. Chart.

I created 2 examples.

1) Single Tree View


Your can see a working example of the employees relationship Organizational Chart demo (1).

This is how I define a data table cell:

for (i = 0; i < emp_count; i++) {
l_data_table.setCell(i, 0, data[i].emp_ename);
l_data_table.setCell(i, 1, data[i].mgr_ename);
}

2) Multiple Trees View


Your can see a working example of the employees relationship Organizational Chart demo (2).

This is how I define a data table cell:

for (i = 0; i < emp_count; i++) {
l_data_table.setCell(i, 0, data[i].emp_empno, data[i].emp_ename);
l_data_table.setCell(i, 1, data[i].mgr_empno, data[i].mgr_ename);
}


Enjoy! :)

I'm not done yet with the Google Visualization API... there's still plenty of charts to try out.

Google Gadget - "Insum's Web 2.0 Demos - Weekly Release"

I decided to try the Google Gadget API after reading Bradley's post. I end up creating a notification gadget to publish "Insum's Web 2.0 Demos - Weekly Release". It's now possible to stay up-to-date if you add this gadget to your blog, website, and/or iGoogle page.

I'll write an article about the creation of such gadget.

Enjoy!