jQuery AJAX
Google Visualization API
Google Visualization API: Organizational Chart
Google Visualization: The Select Event

<script src="http://www.google.com/jsapi"></script>
<script>
    // Load jQuery
    google.load("jquery", "1.2.6", {uncompressed:true});

    // Load Google Visualization API
    google.load('visualization', '1', {packages: ['table', 'orgchart']});
</script>
<script>
    function draw() {
        $.ajax({
            type: "POST",
            url: "wwv_flow.show",
            data: {p_flow_id:$('#pFlowId').attr("value"), 
                   p_flow_step_id:$('#pFlowStepId').attr("value"), 
                   p_instance:$('#pInstance').attr("value"), 
                   p_request:"APPLICATION_PROCESS=GET_EMPLOYEES_RELATIONSHIP"
            },
            dataType: "json",
            success: function(data, textStatus){
                if ((emp_count = data.length) > 0) {
                    var l_data_table = new google.visualization.DataTable();
                    l_data_table.addColumn('string', 'Name');
                    l_data_table.addColumn('string', 'Manager');
                    l_data_table.addRows(emp_count);
                    
                    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);
                    }

                    // Create our two visualizations.
                    var table = new google.visualization.Table($x('table_div'));
                    table.draw(l_data_table, {});

                    var orgchart = new google.visualization.OrgChart($x('org_div'));
                    orgchart.draw(l_data_table, {});
                    
                    // When the table is selected, update the orgchart.
                    google.visualization.events.addListener(table, 'select', function() {
                      orgchart.setSelection(table.getSelection());
                    });

                    // When the orgchart is selected, update the table visualization.
                    google.visualization.events.addListener(orgchart, 'select', function() {
                      table.setSelection(orgchart.getSelection());
                    });
                }
            }
        });
    }

    $().ready(function() {
        draw();
    });
</script>

DECLARE
    l_retval    VARCHAR2(32767);
    l_rows      VARCHAR2(32767);
BEGIN
    FOR i IN (SELECT  emp.empno AS empno
                     ,emp.ename AS ename
                     ,mgr.empno AS mgr_empno
                     ,mgr.ename AS mgr_ename
              FROM    emp emp
                     ,emp mgr
              WHERE   emp.mgr = mgr.empno(+)
             )
    LOOP
        l_rows := l_rows||'{''emp_empno'':'''||i.empno||''',''emp_ename'':'''||i.ename||''',''mgr_empno'':'''||i.mgr_empno||''',''mgr_ename'':'''||i.mgr_ename||'''},';
    END LOOP;
    
    l_retval := '['||rtrim(l_rows,',')||']';
    
    htp.prn(l_retval);
END;