Types of Gauges Introduction to the Gauge Component

Using ADF Gauge Components 25-7

25.3 Creating a Gauge

You can use any of the following ways to supply data to a gauge component: ■ ADF Data Controls: You declaratively create a databound gauge by dragging and dropping a data collection from the ADF Data Controls panel. Figure 25–8 shows the Create Gauge dialog where you configure the metric value, and optionally the minimum and maximum and threshold values for a gauge you are creating. Figure 25–8 Create Gauge Dialog For more information, see the “Creating Databound ADF Gauges section in the Oracle Fusion Middleware Fusion Developers Guide for Oracle Application Development Framework. ■ Tabular data: You can provide CSV comma-separated value data to a gauge through the tabularData attribute of the dvt:gauge tag.

25.3.1 Creating a Gauge Using Tabular Data

The process of creating a gauge from tabular data includes the following steps: ■ Storing the data in a method in the gauge’s managed bean. ■ Creating a gauge that uses the data stored in the managed bean.

25.3.1.1 Storing Tabular Data for a Gauge in a Managed Bean

The tabularData attribute of a gauge component lets you specify a list of metric values that the gauge uses to create a grid and to populate itself. You can provide only the metric value through the tabularData attribute. Therefore, you must specify any desired thresholds and minimum or maximum values through the Property Inspector. A gauge component displays rows and columns of gauges. The text that you specify as column labels appears in the top label of the gauges. The text that you specify as row labels appears in the bottom label of the gauges. 25-8 Web User Interface Developers Guide for Oracle Application Development Framework

25.3.1.2 Structure of the List of Tabular Data

The list that contains the tabular data consists of a three-member Object array for each data value to be passed to the gauge. The members of each array must be organized as follows: ■ The first member index 0 is the column label, in the grid, of the data value. This is generally a String. ■ The second member index 1 is the row label, in the grid, of the data value. This is generally a String. ■ The third member index 2 is the data value, which is usually Double. Figure 25–9 has five columns: Quota, Sales, Margin, Costs, and Units. The example has three rows: London, Paris, and New York. This data produces a gauge set with five gauges in each row and lets you compare values such as sales across the three cities. Figure 25–9 Comparison of Annual Results Example 25–2 shows code that creates the list of tabular data required for the gauge that compares annual results for three cities. Example 25–2 Code to Create a List of Tabular Data for a Gauge public List getGaugeData { ArrayList list = new ArrayList; String[] rowLabels = new String[] {London, Paris, New York}; String[] colLabels = new String[] {Quota, Sales, Margin, Costs, Units}; double [] [] values = new double[][]{ {60, 90, 135}, {50, -100, -150}, {130, 140, 150}, {70, 80, -130}, {110, 120, 130} }; for int c = 0; c colLabels.length; c++ { for int r = 0; r rowLabels.length; r++ { list.add new Object [] {colLabels[c], rowLabels[r], new Double values [c][r]}; } } return list; }

25.3.2 How to Create a Gauge Using Tabular Data

Use the tabularData attribute of the gauge tag to reference the tabular data that is stored in a managed bean. Using ADF Gauge Components 25-9 To create a gauge that uses tabular data from a managed bean: 1. In the ADF Data Visualizations page of the Component Palette, Gauge panel, drag and drop a Gauge onto the page. 2. In the Component Gallery, select the category, type, and quick-start layout style for the gauge that you are creating.

3. In the Gauge Data category of the Property Inspector, from the tabularData

attribute dropdown menu, choose Expression Builder. 4. In the Expression Builder dialog, use the search box to locate the managed bean. 5. Expand the managed bean node and select the method that creates the list of tabular data.

6. Click OK.

The Expression is created. For example, if the name of the managed bean is sampleGauge and the name of the method that creates the list of tabular data is getGaugeData, the Expression Builder generates the code {sampleGauge.gaugeData} as the value for the tabularData attribute of the dvt:gauge tag.

25.3.3 What Happens When You Create a Gauge Using Tabular Data

When you create a gauge tag that is powered by data obtained from a list referenced in the tabularData attribute, the following results occur: ■ A gauge is generated with a setting in its tabularData attribute. The settings for all other attributes for this gauge are provided by default. ■ You have the option of changing the setting of the gaugeType attribute in the Property Inspector to DIAL, LED, STATUSMETER, or VERTICALSTATUSMETER.

25.4 Customizing Gauge Type, Layout, and Appearance

Gauge components can be customized in the following ways: ■ Change the gauge type ■ Specify the layout of gauges in a gauge set ■ Change a gauge size and style ■ Add thresholds ■ Format numbers and text ■ Specify an N-degree dial gauge ■ Customize gauge labels ■ Customize indicators and tick marks ■ Specifying transparency in gauges

25.4.1 How to Change the Type of the Gauge

You can change the type of a gauge using the gaugeType attribute of the dvt:gauge tag. The gauge type is reflected in the visual editor default gauge.