Skip Headers
Oracle® Fusion Middleware Web User Interface Developer's Guide for Oracle Application Development Framework
11g Release 1 (11.1.1)

Part Number B31973-02
Go to Documentation Home
Go to Book List
Book List
Go to Table of Contents
Go to Feedback page
Contact Us

Go to previous page
Go to next page
View PDF

22 Introduction to ADF Data Visualization Components

This chapter highlights the common characteristics and focus of the ADF data visualization components, which are a set of rich interactive ADF Faces components. The remaining chapters in this part of the guide provide detailed information about how to create and customize each component.

This chapter includes the following sections:

22.1 Introducing ADF Data Visualization Components

The ADF data visualization components provide significant graphical and tabular capabilities for displaying and analyzing data. These components provide the following common features:

22.2 Defining the ADF Data Visualization Components

The ADF data visualization components include the following: graph, gauge, pivot table, geographic map, and Gantt chart.

22.2.1 Graph

The ADF Faces graph component gives you the capability of producing more than 50 types of graphs, including a variety of bar graphs, pie graphs, line graphs, scatter graphs, and stock graphs. This component lets you evaluate multiple data points on multiple axes in many ways. For example, a number of graphs assist you in the comparison of results from one group against the results from another group.

The following kinds of graphs can be produced by the ADF Faces graph component:

  • Area graph: Creates a graph in which data is represented as a filled-in area. Use area graphs to show trends over time, such as sales for the last 12 months. Area graphs require at least two groups of data along an axis. The axis is often labeled with increments of time such as months.

  • Bar graph: Creates a graph in which data is represented as a series of vertical bars. Use to examine trends over time or to compare items at the same time, such as sales for different product divisions in several regions.

  • Bar (horizontal) graph: Creates a graph that displays bars horizontally along the Y-axis. Use to provide an orientation that allows you to show trends or compare values.

  • Bubble graph: Creates a graph in which data is represented by the location and size of round data markers (bubbles). Use to show correlations among three types of values, especially when you have a number of data items and you want to see the general relationships. For example, use a bubble graph to plot salaries (X-axis), years of experience (Y-axis), and productivity (size of bubble) for your work force. Such a graph allows you to examine productivity relative to salary and experience.

  • Combination graph: Creates a graph that uses different types of data markers (bars, lines, or areas) to display different kinds of data items. Use to compare bars and lines, bars and areas, lines and areas, or all three.

  • Funnel graph: Creates a graph that is a visual representation of data related to steps in a process. The steps appear as vertical slices across a horizontal cylinder. As the actual value for a given step or slice approaches the quota for that slice, the slice fills. Typically a funnel graph requires actual values and target values against a stage value, which might be time. For example, use this component to watch a process (such as a sales pipeline) move towards a target across the stage of the quarters of a fiscal year.

  • Line graph: Creates a graph in which data is represented as a line, as a series of data points, or as data points that are connected by a line. Line graphs require data for at least two points for each member in a group. For example, a line graph over months requires at least two months. Typically a line of a specific color is associated with each group of data such as Americas, Europe, and Asia. Use to compare items over the same time.

  • Pareto graph: Creates a graph in which data is represented by bars and a percentage line that indicates the cumulative percentage of bars. Each set of bars identifies different sources of defects, such as the cause of a traffic accident. The bars are arranged by value, from the largest number to the lowest number of incidents. A Pareto graph is always a dual-Y graph in which the first Y-axis corresponds to values that the bars represent and the second Y-axis runs from 0 to 100% and corresponds to the cumulative percentage values. Use the Pareto graph to identify and compare the sources of defects.

  • Pie graph: Creates a graph in which one group of data is represented as sections of a circle causing the circle to look like a sliced pie. Use to show the relationship of parts to a whole such as how much revenue comes from each product line.

  • Radar graph: Creates a graph that appears as a circular line graph. Use to show patterns that occur in cycles, such as monthly sales for the last three years.

  • Scatter/polar graph: Creates a graph in which data is represented by the location of data markers. Use to show correlation between two different kinds of data values such as sales and costs for top products. Scatter graphs are especially useful when you want to see general relationships among a number of items.

  • Stock graph: Creates a graph in which data shows the high, low, and closing prices of a stock. Each stock marker displays three separate values.

In JDeveloper, a Component Gallery displays available graph categories, types, and descriptions to provide visual assistance when designing graphs and defining a quick layout. Figure 22-1 shows the Component Gallery for graphs.

Figure 22-1 Component Gallery for Graphs

Component Gallery for Graphs

All graphs support Flash, SVG, and PNG rendering. ADF Faces graph components support interactivity on initial display and data change including the use of zooming and scrolling, the use of an adjustable time selector window to highlight specific sections on a time axis, the use of line and legend highlighting and fading to filter the display of data points, and the use of dynamic reference lines and areas.

Figure 22-2 show an application dashboard illustrating, clockwise from top left:

  • Bar graph.

  • Pie graph.

  • Pie graph with 3D effect.

  • Dial gauges.

Figure 22-2 Dashboard with Bar Graph, Pie Graphs, and Dial Gauges

Dashboard with bar graph, pie graph, and dial gauges.

Figure 22-3 shows an application dashboard illustrating, clockwise from top left:

  • Curved line graph with time selector window.

  • Pie graph with 3D effect and an exploded slice.

  • Bar graph with 3D effect.

Figure 22-3 Dashboard with Line, Pie, and Bar Graphs

Dashboard with line, pie, and bar graphs.

22.2.2 Gauge

The ADF Faces gauge component renders graphical representations of data. Unlike the graph, a gauge focuses on a single data point and examines that point relative to minimum, maximum, and threshold indicators to identify problem areas.

One gauge component can create a single gauge or a set of gauges depending on the data provided.

The following kinds of gauges can be produced by this component:

  • Dial gauge: Creates a gauge that indicates its metric value along a 180-degree arc. This type of gauge usually has an indicator in the shape of a line or an arrow that points to the value that the gauge is plotting.

  • Status meter gauge: Creates a gauge that indicates the progress of a task or the level of some measurement along a horizontal rectangular bar. An inner rectangle shows the current level of a measurement against the ranges marked on an outer rectangle.

  • Status meter gauge (vertical): Creates a gauge that indicates the progress of a task of the level of some measurement along a vertical rectangular bar.

  • LED (lighted electronic display) gauge: Creates a gauge that depicts graphically a measurement, such as key performance indicator (KPI). Several styles of graphics are available for LED gauges such as arrows that indicate good (up arrow), fair (left- or right-pointing arrow), or poor (down arrow).

You can specify any number of thresholds for a gauge. However, some LED gauges (such as those with arrow or triangle indicators) support a limited number of thresholds because there are a limited number of meaningful directions for them to point. For arrow or triangle indicators, the threshold limit is three.

In JDeveloper, a Component Gallery displays available gauges categories, types, and descriptions to provide visual assistance when designing gauges and defining a quick layout. Figure 22-4 shows the Component Gallery for gauges.

Figure 22-4 Component Gallery for Gauges

Component Gallery for guages.

All ADF Faces gauge components can use Flash, SVG, and PNG rendering.

Figure 22-5 shows a set of dial gauges set with thresholds to display warehouse stock levels.

Figure 22-5 Dial Gauges set with Thresholds

Dial gauges set wiith thresholds

Figure 22-6 shows a set of status meter gauges set with thresholds.

Figure 22-6 Status Meter Gauges set with Thresholds

Status meter gauges set with thresholds.

22.2.3 Pivot Table

The ADF Faces pivot table produces a grid that supports multiple layers of data labels on rows or columns. This component also provides the option of generating subtotals and totals for grid data.

Pivot tables let you switch data labels from one edge (row or column) to another edge to obtain different views of your data. For example, a pivot table might initially display products within a region in its rows while showing years in its columns. If you switch region to the columns so that columns display year within region then data cells in the table show totals for products by year within region.

Pivot tables support horizontal and vertical scrolling, header and cell formatting, and drag-and-drop pivoting. Pivot tables also support ascending and descending group sorting of rows at runtime. Figure 22-7 shows a pivot table.

Figure 22-7 Pivot Table

pivot table

22.2.4 Geographic Map

The ADF Faces geographic map provides the functionality of Oracle Spatial within the ADF framework. This component represents business data on a map and lets you superimpose multiple layers of information on a single map. This component supports the simultaneous display of a color theme, a graph theme (bar or pie graph), and point themes. You can create any number of each type of theme and you can use the map toolbar to select the desired themes at runtime.

As an example of a geographic map, consider a base map of the United States with a color theme that provides varying color intensity to indicate the popularity of a product within each state, a pie chart theme that shows the stock levels of warehouses, and a point theme that identifies the exact location of each warehouse. When all three themes are superimposed on the United States map, you can easily evaluate if there is sufficient inventory to support the popularity level of a product in specific locations. Figure 22-8 shows a geographic map with color theme, pie graph theme, and point theme.

Figure 22-8 Geographic Map with Color Theme, Pie Graph Theme, and Point Theme

goegraphic map for a product

22.2.5 Gantt

The ADF Faces Gantt chart is a type of horizontal bar graph (with time on the horizontal axis) that is used in planning and tracking projects to show resources or tasks in a time frame with a distinct beginning and end.

A Gantt chart consists of two ADF Faces tree tables combined with a splitter. The left-hand table contains a list of tasks or resources while the right-hand table consists of a single column in which progress is graphed over time.

There are three types of gantt components:

  • Project Gantt: Creates a Gantt chart that shows tasks vertically and the duration of the task is represented as a bar on a horizontal timeline.

  • Resource utilization Gantt: Creates a Gantt chart that shows graphically whether resources are over or under allocated. It shows resources vertically while showing their allocation and, optionally, capacity on the horizontal time axis.

  • Scheduling Gantt: Creates a Gantt chart that shows resource management and is based on manual scheduling boards. It shows resources vertically with corresponding activities on the horizontal time axis.

Figure 22-9 shows an ADF Faces project Gantt view of staff resources and schedules.

Figure 22-9 Project Gantt

project gantt of staff assignments

22.3 Providing Data for ADF Data Visualization Components

All ADF data visualization components can be bound to rowset data collections in an ADF data control. For information and examples of data binding these components to generic appmodule data controls, see the "Creating Databound ADF Data Visualization Components" chapter in Oracle Fusion Middleware Fusion Developer's Guide for Oracle Application Development Framework.

Graphs and gauges have a tabularData method that lets you provide CSV (comma separated value) data from a method that is stored in a managed bean.

The Gantt chart component supports the use of a basic tree data control when you want to provide data not only for tasks and resources but also for subtasks and subresources.

22.4 Downloading Custom Fonts for Flash Images

ADF Faces graph and gauge components provide text rotation, high fidelity display, and embedded fonts using Flash image types. The Oracle Flash engine is a prebuilt Shockwave Flash (SWF) file containing pre-compiled ActionScript code used to display a graph or gauge by using an XML definition of a chart. The Flash engine is downloaded and instantiated by a Flash Player embedded in the client browser at runtime.

Embedded fonts are used for display and printing purposes, are not installed on the client, and cannot be edited. They are used by the Flash Player, in memory, and are cleared when the player terminates. Although embedded fonts require a roundtrip to the server to download the font SWF file, they provide a consistent look across all clients, support text rotation, and minimize distortion or anti-aliasing.

Oracle provides two default fonts and their variations such as Bold and Italic, distributed as SWF files in the dvt-faces.jar file:

When the default font names are specified in a graph or gauge XML definition, the font files are downloaded and embedded in the Flash engine.

Specific fonts and their respective SWF files can be added to your application as embedded fonts to be passed to the Flash engine. The engine will defer-load any font specified in the list until that font is required by any text or labels in a graph or gauge definition. Example 22-1 defines the Georgia font with a Bold and Italic combination.

Example 22-1 SWF File

public class fGeorgiaBoldItalic extends Srite
  [Embed (source="c:\\WINDOWS\\Fonts\\GEORGIABI.TTF",  
    fontName="Georgia Bold Italic",
  private statis car font1:Class;
  public function fGeorgiaBoldItalic() {
    Font registerFont(font1);

You can set ADF Faces graphs and gauges font attributes as follows: