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:thresholdSet>
  <dvt:threshold fillColor="#52ff52" thresholdMaxValue="1500.0"/>
  <dvt:threshold fillColor="#ff9c31" thresholdMaxValue="2500.0"/>
  <dvt:threshold fillColor="#ff0000"/>
</dvt:thresholdSet>

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.