Gauges in APEX can look Gaugaustic!

Oracle APEX is a very suitable RAD tool for quickly creating efficient database-centric web applications. We all know that and that’s what we mostly use it for. I’ve come across some comments here and there about using APEX as a replacement for dashboards. Ever since the introduction of Oracle JET Charts in APEX 5.1+, having interactive dashboards is not far-fetched anymore. Although Oracle JET provides a whole lot of functionality, it’s no very complete. Based on the requirement I had which needed Dynamic gauges to be created, I decided to integrate the D3 JavaScript library into APEX. After doing so, I created an APEX plugin for these gauges for public use. I intend on introducing this plugin in this blog post.

It is noteworthy that this plugin is a replica of the D3 Liquid Fill Gauge plugin in the D3 gallery. You can find information of how it works in this link : http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6

After downloading the plugin (you can find download links at the bottom of this post), import it into your application and add a new item to any region of choice and set its type to “APEX D3 Liquid Gauge“.

Gauges’ Settings

After you create the item, you are confronted to set some settings. I will explain the settings below :

d3 gauges settings

Type

Define the type of source used for the value shown on the gauge. Options include “From Input” and “From Query”.

Percent (Input)

You see this option when you set Type to “From Input”. You can enter a number to be shown on the gauge.

Percent (SQL Query)

You see this option when you set Type to “From Query”. You can enter a SQL query that returns a single value.

Height

Set the height of the gauges. The value is based on pixels, therefore an integer will suffice.

Theme

Choose from 3 preset themes. Theme 3 is the default theme. Setting the colours will override any colours in the themes.

Circle Colour

Set the colour of the circle. Using the color picker simplifies the process of choosing a colour.

Text Colour

Set the colour of the text. Using the color picker simplifies the process of choosing a colour.

Wave Text Colour

Set the colour of the wave text inside the gauge. Using the color picker simplifies the process of choosing a colour.

Wave Colour

Set the colour of the wave. Using the color picker simplifies the process of choosing a colour.

Additional Settings

Note that this plugin is a dynamic plugin reacts to the click event. To use this functionality all that you need to due is specify a SQL query that returns a single value in the List of Values property of the plugin. Clicking on the item will fetch new data from the query you define and update the plugin using AJAX.

dynamic gauges sql query

I guess that’s all there is to it. To view a live working example of the plugin click on the link below :

https://apex.oracle.com/pls/apex/f?p=9468:11

To download the plugin visit my GitHub repository :

https://github.com/farzadso/APEX-D3-Liquid-Gauge

1,746 total views, 1 views today

7 Replies to “Gauges in APEX can look Gaugaustic!”

  1. Hi,

    I am intersted in integrating D3 into Apex. Is it possible to get some instructions from you how to do that.

    Thank you

    1. Hi Ozren,

      Thanks for you comment. Integrating D3 in APEX is very simple. All you need to do is go to the D3 website, download the library. The file you require is called ‘d3.vXXX.min.js’. The XXX is different based on the version you download (Version 4 is the latest at the time of this comment). Then based on your deployment and standards, you should add the javascript file to your application. The best way to do so is to add the file to your application server and add it to your application. If you don’t have access to the application server, just upload the file in your Static Application/Workspace files. Reference the file on any page you desire via the link you get after uploading the file.

      Hope this helps.

  2. Hi Farzad
    I am in Mashad … Thanks for Your Plugin !
    i user this sql
    select sum(hazineh)*100/sum(etebar) as darsad
    from Mytable ;

    this Sql return 87 in My data , but when I run My form this error :

    “ora_sqlerrm: ORA-00911: invalid character ”

    Please send help or me !
    Mamnon

    1. Hi Ali,

      Thanks for you feedback. I tested a similar query to yours on my own server and the plugin loaded flawlessly. Where did you put the query? Can you make an example on apex.oracle.com and provide the credentials for me to take a look at it? You can email the credentials to me : farzadsoltani@farzadsoltani.com

  3. Hello, thank you for your great work; i would like to use it inside a region and not as a single item showing values from multiple records, do you think it is possible?
    Thanks in advance and greetings

    1. Hi Cris,
      Thanks for trying the plugin. Unfortunately the plugin is an ITEM type plugin and not a REGION type plugin. You can use the plugin as an ITEM in any given REGION though. If you want it to stand out as a separate region I think you’re going to need to use custom CSS.

Leave a Reply

Your email address will not be published. Required fields are marked *

 
Loading Facebook Comments ...