Oracle JET - Interactive Force Directed Layout

When developing a user interface for modern enterprise applications one of the challenging tasks is to unlock the data within the enterprise and provide it in a usable manner to the end users. Commonly enterprises have vast amounts of data which are so compartmented users are unable to access them and in some cases the data is presented in ways that it makes it hard for users to grasp the bigger picture.

When developing modern enterprise applications one of the tasks that should be undertaken is ensuring data is not only accessible however that the data is also presented in a way that it makes sense to users. unlocking data in ways that it is easy to understand and that it is easy and intuitive to work with.

When you develop you enterprise application UI based upon Oracle JET you can extend Oracle JET with all different kind of javascript and HTML5 based options. In the below example we showcase an Interactive Force Directed Layout to represent relations between datapoints in an interactive manner.

The above is based upon GOjs in combination with Oracle JET. GoJS is a feature-rich JavaScript library for implementing custom interactive diagrams and complex visualizations across modern web browsers and platforms. GoJS makes constructing JavaScript diagrams of complex nodes, links, and groups easy with customizable templates and layouts.


As you can see from the above screenshot the demo application is build based upon a demo version of GOjs. When you like to use GOjs in a commercial manner you will have to purchase a license. However, a version is available to test the functionality.

To enable the above you will have to download go.js from github and include it into the Oracle JET structure. In our case I included the go.js library under js/libs/custom .

To get the above example running the below code can be used as part of the Oracle JET html code:

To ensure the script is loaded you will have to ensure the body tag contains an onload="init()" statement and you will have to ensure that you have a div element with id="myDiagramDiv" in your page.

if we look at the script used in the example above you will notice that the data points are hard coded into the script. In a real world situation this would not be preferable and you would use a method to load the data from a REST API.