2.2.09

The EMP mindmap

By accident, I stumbled upon a Java script library for generating mind maps. But instead of having a static diagram, this Java script enabled one is dynamic, you can move nodes, you can zoom in or out to another level of nodes. A very nice graphical way of presenting hierarchical data. For example, who's managing who in Oracle's EMP table as shown below. Come on, grab your mouse and start moving and clicking, it's alive!

Here's the recipe to build such an application.

  • Start with downloading the source of the Google code project js-mindmap. In the sources you will several Java script libraries, and an example file js-mindmap.html.

  • In APEX upload the Java script libraries add references from the header section to these libraries.

  • Add a PL/SQL region, which generates the hierarchy and will be converted in a diagram:

    <canvas id="cv"></canvas>
    <div id="js-mindmap">
    <a>KING</a>
    <ul>
    <li>BLAKE
    <ul>
    <li>ALLEN</li>
    ...
    <li>JAMES</li>
    </ul>
    ...
    </ul>
    </li>
    </div>

    For example, the function show_emp_tree returns the html code for the <div> element.

Note that when you replace the EMP table by OEHR_EMPLOYEES table the animation will become very slow due to the increase of nodes and links. Also the js-mindmap project is still in development. But anyway it's fun!

5 comments:

Sujay Dutta, PMP said...

Amazing Stuff!! :)

Dimitri Gielis said...

very nice Jornica

Patrick Wolf said...

Cool!

Chris said...

A few months ago I played with mindmap software, too. The customer had a large, manually maintained mindmap file and the requirement was to generate it out of the database because of the usual reasons. After looking at several alternatives (e.g. using the XML format of their application - MindJet, Graphviz, js-mindmap and the amazing JIT), I settled for the open source FreeMind program. Their XML format is relatively simple and the have a powerful flash plugin (here's a nice example). We still don't do APEX so I used plain mod_plsql, but the concept of embedding the player is quite similar to APEX' flash charts.

Data Recovery Chicago said...

Fantastic stuff Jornica..
You always included some unique stuff.. Really appreciating...