0 
0
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.
Related posts:
ADF 11g RichFaces – A closer look at the Pivot Table Data Visualization component ADF 11g RichFaces – handling the client side double click to invoke a server side operation ADF 11g – TreeTable with sub totals – how the SQL query can make life easier for the View developer 
5 day ADF 11g Training – vanaf maandag 26 oktober Using the ADF DVT Radar Graph for comparing series – further analyzing ODTUG Kaleidoscope 2011 Session Schedule
