ADF 11g RichFaces – using a Gauge in a Table to visualize High, Low and Medium Salaries



One of the sweet spots in ADF 11g RichFaces is of course the library of Data Visualization components. I have written about PivotTable and GanttChart in the past and would now like to also say a few words about Gauges. The collection of Gauges in ADF 11g is quite useful. We will see how easy it is to leverage a Gauge to provide more insight in data.

The steps for creating this Gauge:

1. Create a page with a plain ADF table (how plain is that?) bound to the Employees collection

2. Add a new column to the table

3. Drag the Gauge component to the new column.

Select the triangle led Gauge, select the option without bottom label.

4. Go to the property inspector for the Gauge Component.

Set the value to #{row.Sal} – this specifies that the value for which the Gauge is displayed is the Salary of the current Employee

5. Specify the threshold values

The Gauge is created with a thresholdSet with three threshold elements. These need to be specified. For example:

  <dvt:threshold fillColor="#52ff52" thresholdMaxValue="1500.0"/>
  <dvt:threshold fillColor="#ff9c31" thresholdMaxValue="2500.0"/>
  <dvt:threshold fillColor="#ff0000"/>

Note: the colors can be selected with a color picker – you do not have to think up the codes yourself.

6. Refine the styling

Ensure the Gauge fits inside the table by setting the inlineStyle:

 <dvt:gauge id="gauge1" gaugeType="LED" imageFormat="FLASH"
            ledStyle="LS_TRIANGLE" value="#{row.Sal}"
            inlineStyle="height:20px; width:20px;">

Do not show the Gauge Metric (the Salary value) by specifying:

  <dvt:metricLabel position="LP_NONE"/>

Run the page:

 By specifying different values for attribute LED_STYLE we can try out other ways of presenting the Gauge:

<dvt:gauge id="gauge1" gaugeType="LED" imageFormat="FLASH"
           ledStyle="LS_DOT" value="#{row.Sal}"
           inlineStyle="height:20px; width:20px;">

Some examples:


More serious would be using a different type of Gauge altogether – a Dial or Statusmeter. Switching to a different type of Gauge is as simple as changing the value of the gaugeType attribute.


About Author

Lucas Jellema, active in IT (and with Oracle) since 1994. Oracle ACE Director and Oracle Developer Champion. Solution architect and developer on diverse areas including SQL, JavaScript, Kubernetes & Docker, Machine Learning, Java, SOA and microservices, events in various shapes and forms and many other things. Author of the Oracle Press book Oracle SOA Suite 12c Handbook. Frequent presenter on user groups and community events and conferences such as JavaOne, Oracle Code, CodeOne, NLJUG JFall and Oracle OpenWorld.

Comments are closed.