Thursday, 28 February 2013

Apex and Graph Visualisation Libraries


I was recently asked by a client to create a quick POC in Apex to demonstrate how relationships between physical assets (in this case oil refineries) could be maintained using a graphical tool.  So I looked at a number of different Javascript graphing libraries and chose MXGraph from JGraph which seemed to have the most features and looked relatively easy to integrate.   It's worth mentioning that it is not Open Source and has a fairly hefty licence fee.

The requirement was to be able to show the process flow between units in a particular oil refinery with relationships representing the refined output from one processing unit and the input into another.  The idea is to build out quite detailed maps of the process flows within refineries and then use this with other 3rd party outage data to predict the affect on production and thus ultimately the change in price of crude and refined oil products.

The POC was quite simple, as you can see from the screenshot below, and was really just put together to show off what could be done with a graphing tool.  The refinery units and relationships are pulled from the DB and, at the point a graph is saved, all the positional and sizing data is saved as well.  It would need a lot of work to get it up to scratch but it was just starting point to illicit further ideas from the client.

Oracle Apex with MXGraph
Oracle Apex with MXGraph
I've uploaded the demo to apex.oracle.com  if you want to take a look.  There's an example refinery configuration for 'BP Texas City' (in case anyone notices it's not an accurate representation!).   I've disabled the 'Save' functionality as the demo doesn't allow for the creation of new refinery units, but does allow deletion, so each time you view it it should look the same.

I'm really interested to know what other uses people are finding for graphical interfaces within their Apex apps, as I often come across complex data sets that would benefit from being maintained graphically rather than using a form based approach.  Also does anyone have a particular preference for  a Javascript library?

2 comments:

Anonymous said...

I use Google Charts (it's free) to create GraphViz directed graphs.

https://developers.google.com/chart/image/docs/gallery/graphviz

Paul Brookes said...

Thanks, I'll take a look.