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.

12 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...

Scott Wesley said...

Why the conversion of JSON data into array data? Can't you just send the JSON output directly into the DataTable()?

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

Yes you can. https://developers.google.com/chart/interactive/docs/php_example