Adding Alerts and Annotations to Graphs

24-50 Web User Interface Developers Guide for Oracle Application Development Framework – all default: Show all data change indicators. ■ animationUpColor: Use to specify the RGB hexadecimal color used to indicate that a data value has increased. ■ animationDownColor: Use to specify the RGB hexadecimal color used to indicate that a data value has decreased. 25 Using ADF Gauge Components 25-1 25 Using ADF Gauge Components This chapter describes how to use a databound ADF gauge component to display data, and provides the options for gauge customization. This chapter includes the following sections: ■ Section 25.1, Introduction to the Gauge Component ■ Section 25.2, Understanding Data Requirements for Gauges ■ Section 25.3, Creating a Gauge ■ Section 25.4, Customizing Gauge Type, Layout, and Appearance ■ Section 25.5, Adding Gauge Special Effects and Animation ■ Section 25.6, Using Custom Shapes in Gauges For information about the data binding of gauges, see the Creating Databound ADF Gauges section in the Oracle Fusion Middleware Fusion Developers Guide for Oracle Application Development Framework.

25.1 Introduction to the Gauge Component

Gauges identify problems in data. A gauge usually plots one data point with an indication of whether that point falls in an acceptable or an unacceptable range. Frequently, you display multiple gauges in a single gauge set. The gauges in a set usually appear in a grid-like format with a configurable layout. A Component Gallery displays available gauge categories, types, and descriptions to provide visual assistance when creating gauges and using a quick-start layout. Figure 25–1 shows the Component Gallery for gauges. 25-2 Web User Interface Developers Guide for Oracle Application Development Framework Figure 25–1 Component Gallery for Gauges When a gauge component is inserted into a JSF page using the Component Gallery, a set of child tags that support customization of the gauge is automatically inserted. Example 25–1 shows the code inserted in the JSF page for a dial gauge with the quick-start layout selected in the Component Gallery in Figure 25–1 . Example 25–1 Gauge Sample Code dvt:gauge id=gauge2 value={bindings.Gaugedemo1View1.gaugeModel} gaugeType=DIAL imageFormat=FLASH dvt:gaugeBackground dvt:specialEffects fillType=FT_GRADIENT dvt:gradientStopStyle dvt:specialEffects dvt:gaugeBackground dvt:gaugeFrame dvt:indicator dvt:indicatorBase dvt:gaugePlotArea dvt:tickLabel dvt:tickMark dvt:topLabel dvt:bottomLabel dvt:metricLabel position=LP_WITH_BOTTOM_LABEL dvt:thresholdSet dvt:threshold fillColor=d62800 dvt:threshold fillColor=00ff00 dvt:thresholdSet dvt:gauge