APEX Bubble Charts – Finding the Largest Bubble

During a trip to OUG Ireland in March 2016, someone mentioned to me that their users had difficulty in finding the largest bubble using the Bubble Chart plugin found within the Sample Charts packaged application. We discussed a solution whereby the bubble could be animated so that the users could easily see which bubble was the largest.

This got me thinking about possible solutions and once back in the office I found one.

The jQueryUI library contains many types of animation effects including shake, bounce, explode, fold and many more.

This library is automatically loaded in to APEX; however not all the effects are available or produce the desired results. Therefore I placed the latest stable jQueryUI library from the official site in to the JavaScript File URLs section of my page to take advantage of the animation effects.

Once that was completed I added a button named “Show Greatest” to my page which, on click, invokes a JavaScript Dynamic Action to run a piece of JavaScript code.

I’ve heavily annotated the code below to show the steps but basically it loops through all the bubbles and keeps a track of the current largest radius. The final step is to use the Pulsate effect to notify the users which is the largest bubble.

This example demonstrates the power and flexibility of jQueryUI when combined with APEX Plugins.

The bubble chart is just one of 45 plugins available within the APEX 5 Sample Applications.

Author: Matt Mulvaney

Job Title: Senior Oracle APEX Development Consultant

Bio: Matt is an experienced APEX solution designer having designed numerous complex systems using a broad range of Oracle Technologies. Building on his previous experience of Oracle Forms & PL/SQL, he is entirely focused on providing functionally rich APEX solutions. Matt promotes APEX as a software platform and openly shares best practises, techniques & approaches. Matt has a passion for excellence and enjoys producing high quality software solutions which provide a real business benefit.