Storing Tabular Data for a Gauge in a Managed Bean

Using ADF Gauge Components 25-11 To specify the size of a gauge at its initial display: 1. In the Structure window, right-click the dvt:gauge node and choose Go to Properties .

2. In the Style attributes category of the Property Inspector, enter a value for the

InlineStyle attribute of the dvt:gauge tag. For example: inlineStyle=width:200px;height:200px

25.4.3.2 Providing Dynamic Resizing of a Gauge

You must enter values in each of two attributes of the dvt:gauge tag to allow for a gauge to resize when its container in a JSF page changes in size. The values that you specify for this capability also are useful for creating a gauge component that fills an area across different browser window sizes. To allow dynamic resizing of a gauge: 1. In the Structure window, right-click the dvt:gauge node and choose Go to Properties .

2. In the Behavior attributes category of the Property Inspector for the

DynamicResize attribute, select the value DYNAMIC_SIZE. 3. In the Style attributes category of the Property Inspector, for the InlineStyle attribute, enter a fixed number of pixels or a relative percent for both width and height. For example, to create a gauge that fills its container’s width and has a height of 200 pixels, use the following setting for the inlineStyle attribute: width:100;height:200px;

25.4.3.3 Using a Custom Style Class for a Gauge

You have the option of specifying a custom style class for use with a gauge. However, you must specify width and height in the inlineStyle attribute. To specify a custom style class for a gauge: 1. In the Structure window, right-click the dvt:gauge node and choose Go to Properties .

2. In the Style attributes category of the Property Inspector, for the StyleClass

attribute, select Edit from the Property menu choices, and select the CSS style class to use for this gauge. 3. In the InlineStyle attribute, enter a fixed number of pixels or a relative percent for both width and height. For example, to create a gauge that fills its container’s width and has a height of 200 pixels, use the following setting for the inlineStyle attribute: width:100;height:200px;.

25.4.4 How to Add Thresholds to Gauges

Thresholds are data values in a gauge that highlight a particular range of values. Thresholds must be values between the minimum and the maximum value for a gauge. The range identified by a threshold is filled with a color that is different from the color of other ranges. The data collection for a gauge can provide dynamic values for thresholds when the gauge is databound. After the gauge is created, you can also insert a 25-12 Web User Interface Developers Guide for Oracle Application Development Framework dvt:thresholdSet tag and individual dvt:threshold tags to create static thresholds. If threshold values are supplied in both the data collection and in threshold tags, then the gauge honors the values in the threshold tags.

25.4.4.1 Adding Static Thresholds to Gauges

You can create an indefinite number of thresholds in a gauge. Each threshold is represented by a single dvt:threshold tag. One dvt:thresholdSet tag must wrap all the threshold tags. To add static thresholds to a gauge: 1. In the Structure window, right-click the gauge node and choose Insert inside dvt:gauge ADF Data Visualization Threshold Set. You do not need to specify values for attributes on the dvt:thresholdSet tag.

2. Right-click the dvt:thresholdSet node and choose Insert inside dvt:thresholdSet

threshold . 3. In the Property Inspector, enter values for the attributes that you want to customize for this threshold. You have the option of entering a specific fill color and border color for the section of the gauge related to the threshold. You can also identify the maximum value for the threshold and any text that you want to display in the legend to identify the threshold.

4. Repeat Step 2 and Step 3 to create each threshold in the gauge from the lowest

minimum value to the highest maximum value. You have the option of adding any number of thresholds to gauges. However, arrow and triangle LED gauges support thresholds only for the three directions to which they point.

25.4.5 How to Format Numeric Values in Gauges

For gauges, the dvt:metricLabel and dvt:tickLabel tags may require numeric formatting.

25.4.5.1 Formatting the Numeric Value in a Gauge Metric Label

The metric label tag has a numberType attribute that lets you specify whether you want to display the value itself or a percentage that the value represents. In some cases, this might be sufficient numeric formatting. You can also use the af:convertNumber tag to specify formatting for numeric values in the metric label. For example, the af:convertNumber tag lets you format data values as currency or display positive or negative signs. To format numbers in a gauge metric label: 1. In the Structure window, right-click the gauge node and choose Insert inside dvt:gauge ADF Data Visualization metricLabel. Note: For the final threshold, the maximum value of the gauge is used as the threshold maximum value regardless of any entry you make in the threshold tag for the final threshold.