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:
I have to forward this to a co-worker. He was looking for organizational charts. Like it!
Patrick
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
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
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.
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
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
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
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. :(
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??
Jyothish,
Usually, Google will release new APIs instead of updating existing one.
The downside with hosted services is that you can't control everything...
Why the conversion of JSON data into array data? Can't you just send the JSON output directly into the DataTable()?
Yes you can. https://developers.google.com/chart/interactive/docs/php_example
Post a Comment