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.

10 comments:

Patrick Wolf said...

I have to forward this to a co-worker. He was looking for organizational charts. Like it!

Patrick

Nat said...

This is awesome.

I'm a pl/sql developer and new apex/web development. Can you please help me with some more information on how the chart appears on the page please.

I'm looking at this for more information http://www.oracle.com/technology/pub/articles/spendolini-tree.html . Is this the right direction ?

Regards
Nat

Louis-Guillaume Carrier-Bédard said...

Nat,

Thanks for your interest.

I use Google Visualization API to display charts.

On your page, create an HTML region. The source of the region should be: <div id="org_div"></div>

If you take a look at my code, you'll find :
var orgchart = new google.visualization.OrgChart($x('org_div')); orgchart.draw(l_data_table, {});

$x('org_div') gets the DIV you put in your HTML region.

Scott's example is good, but he's not using Google Visualization API. And also, the Tree (Org chart) has a memory for selections. I think it as too much stuff for a beginner.

Hope this helps,
L-G

Nat said...

L-G,

Thanks for your reply.

I will try again to use your tips to see if I can get the chart to work.

I'm so curious to see how the years of data I have collected over the last 5 years will show up on the motion chart.

Emilie said...

Hey!

I'm using an organizational chart in ApEx and wondering if I could download the library to use my application offline. Do you have any clue?

Emilie

Louis-Guillaume Carrier-Bédard said...

Emilie,

That's a question frequently asked.

Google Web Services are not available offline.
If you want something good and not too expensive, have a look at AnyChart (+ integration kit from APEX Evangelists).

Regards,
L-G

Emilie said...

Thanks for your answer! I previously used a tree made by ApEx but was not satisfied. So, I tried an other way to expose my datas...
Anycharts are not useful for me.

Regards,
Emilie

RG. said...

Thanks,It would be great enough if we can draw a Org Chart vertical, I mean for a large organizations tehh chart goes horizontally and we cannot have a print option.

Can we reverse engg the API such a way taht we can draw the Org Chart in a single page.

I'm stuckked out here. :(

Jyothish said...

L-G,

I am a php developer. Will there be any issue for currently running applications when changes comes in Google Web Services??? I mean while version upgrading or something like that??

Louis-Guillaume Carrier-Bédard said...

Jyothish,

Usually, Google will release new APIs instead of updating existing one.

The downside with hosted services is that you can't control everything...