Introduction to ADF Data Visualization Components Providing Data for ADF Data Visualization Components

Introduction to ADF Data Visualization Components 23-5 ■ pie graph with 3D effect and an exploded slice ■ bar graph with 3D effect Figure 23–4 Dashboard with Line, Pie, and Bar Graphs Figure 23–5 shows a line sparkchart displaying sales trends in a table column. Figure 23–5 Sparkchart of Sales Trends

23.2.2 Gauge

The 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. 23-6 Web User Interface Developers Guide for Oracle Application Development Framework The following kinds of gauges can be produced by this component: ■ Dial gauge: Creates a gauge that indicates its metric value along an 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 23–6 shows the Component Gallery for gauges. Figure 23–6 Component Gallery for Gauges All gauge components can use Flash, SVG, and PNG rendering. Introduction to ADF Data Visualization Components 23-7 Figure 23–7 shows a set of dial gauges set with thresholds to display warehouse stock levels. Figure 23–7 Dial Gauges set with Thresholds Figure 23–8 shows a set of status meter gauges set with thresholds. Figure 23–8 Status Meter Gauges set with Thresholds

23.2.3 Pivot Table

The pivot table produces a grid that supports multiple layers of data labels on rows or columns. An optional pivot filter bar can be associated with the pivot table to filter data not displayed in the row or column edge. When bound to an appropriate data control such as a row set, the component also supports the option of generating subtotals and totals for grid data, and drill operations at runtime. In JDeveloper, a Create Pivot Table wizard provides declarative support for databinding and configuring the pivot table. For more information, see the Creating Databound ADF Pivot Tables section in the Oracle Fusion Middleware Fusion Developers Guide for Oracle Application Development Framework. Pivot tables let you swap data labels from one edge row or column or pivot filter bar page edge to another edge to obtain different views of your data. For example, a pivot table might initially display total sales data for products within regions on the row edge, broken out by years on the column edge. If you swap region and year at runtime, then you end up with total sales data for products within years, broken out by 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 23-8 Web User Interface Developers Guide for Oracle Application Development Framework sorting of rows at runtime. Figure 23–9 shows an example pivot table with a pivot filter bar. Figure 23–9 Pivot Table with Pivot Filter Bar

23.2.4 Geographic Map

The 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 whether there is sufficient inventory to support the popularity level of a product in specific locations. Figure 23–10 shows a geographic map with color theme, pie graph theme, and point theme. Figure 23–10 Geographic Map with Color Theme, Pie Graph Theme, and Point Theme Introduction to ADF Data Visualization Components 23-9

23.2.5 Gantt Chart

The 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 23–11 shows a project Gantt view of staff resources and schedules. Figure 23–11 Project Gantt

23.2.6 Hierarchy Viewer

The hierarchy viewer component displays hierarchical data as a set of linked nodes in a diagram. The nodes and links correspond to the elements and relationships to the data. The component supports pan and zoom operations, expanding and collapsing of the nodes, rendering of simple ADF Faces components within the nodes, and search of the hierarchy viewer data. A common use of the hierarchy viewer is to display an organization chart, as shown in Figure 23–12 . 23-10 Web User Interface Developers Guide for Oracle Application Development Framework Figure 23–12 Hierarchy Viewer as Organizational Chart In JDeveloper, a Component Gallery displays available hierarchy viewer types and descriptions to provide visual assistance when designing the component and defining a quick layout. Figure 23–13 shows the Component Gallery for the hierarchy viewer. Introduction to ADF Data Visualization Components 23-11 Figure 23–13 Component Gallery for Hierarchy Viewer

23.3 Providing Data for ADF Data Visualization Components

All data visualization components can be bound to row set data collections in an ADF data control. For information and examples of data binding these components to data controls, see the Creating Databound ADF Data Visualization Components chapter in the Oracle Fusion Middleware Fusion Developers 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.

23.4 Downloading Custom Fonts for Flash Images

Graph and gauge components provide text rotation, high fidelity display, and embedded fonts using Flash image types. The Flash engine is a prebuilt Shockwave Flash SWF file containing precompiled 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, they are not installed on the client, and they 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. 23-12 Web User Interface Developers Guide for Oracle Application Development Framework Oracle provides one font, Albany WT, for use in Flash images when necessary. This font does not provide any non-plain variations such as Bold or Italic. The Albany WT font is used instead of the default font to support certain animations not supported by Flash with device fonts, if the application does not specify and provide its own embedded font to use instead. 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 23–1 defines the Georgia font with a Bold and Italic combination. Example 23–1 SWF File package { import.flash.display.Sprite; import.flash.text.Font; public class fGeorgiaBoldItalic extends Srite [Embed source=c:\\WINDOWS\\Fonts\\GEORGIABI.TTF, fontName=Georgia Bold Italic, fontWeight=Bold, fontStyle=Italic. mimType=applicationx-font-truetype] private statis car font1:Class; public function fGeorgiaBoldItalic { Font registerFontfont1; } } } You can set graph and gauge font attributes as follows: ■ fontEmbedding: Defines whether or not the embedded fonts are used. Some performance may be gained by setting the attribute to none. ■ fontMap: Contains the actual map of the fonts that should be used for embedding. The map contains the name of a font and a URL where the custom font SWF file can be found. 24 Using ADF Graph Components 24-1 24 Using ADF Graph Components This chapter describes how to use an ADF graph component to display data, and provides the options for graph customization. This chapter includes the following sections: ■ Section 24.1, Introduction to the Graph Component ■ Section 24.2, Understanding the Graph Tags ■ Section 24.3, Understanding Data Requirements for Graphs ■ Section 24.4, Creating a Graph ■ Section 24.5, Changing the Graph Type ■ Section 24.6, Customizing the Appearance of Graphs ■ Section 24.7, Customizing the Appearance of Specific Graph Types ■ Section 24.8, Adding Specialized Features to Graphs ■ Section 24.9, Animating Graphs For information about the data binding of ADF graphs, see the Creating Databound ADF Graphs section in the Oracle Fusion Middleware Fusion Developers Guide for Oracle Application Development Framework.

24.1 Introduction to the Graph Component

The graph component gives you the capability of producing more than 50 types of graphs, including a variety of area, bar, bubble, combination, funnel, line, Pareto, pie, radar, scatter, sparkchart, 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 with the results from another group. A Component Gallery displays available graph categories, types, and descriptions to provide visual assistance when you are creating graphs and specifying a quick-start layout. Figure 24–1 shows the Component Gallery for horizontal bar graphs. 24-2 Web User Interface Developers Guide for Oracle Application Development Framework Figure 24–1 Component Gallery for Horizontal Bar Graphs When a graph is inserted into a JSF page using the Component Gallery, a set of child tags that support customization of the graph is automatically inserted. Example 24–1 shows the source code for a horizontal bar graph with the quick-start layout selected in the Component Gallery in Figure 24–1 . Example 24–1 Horizontal Bar Graph Sample Code dvt:horizontalBarGraph id=horizontalBarGraph1 value={bindings.SalesStageDataView1.graphModel} subType=BAR_HORIZ_CLUST customLayout=CL_NONE dvt:background dvt:specialEffects dvt:background dvt:graphPlotArea dvt:seriesSet dvt:series dvt:seriesSet dvt:o1Axis dvt:y1Axis dvt:legendArea automaticPlacement=AP_NEVER position=LAP_BOTTOM dvt:legendTitle text=Legend Title dvt:graphSubtitle horizontalAlignment=CENTER text=Subtitle dvt:graphTitle horizontalAlignment=CENTER text=Title dvt:horizontalBarGraph Figure 24–2 shows the visual editor display of the horizontal bar graph created with the Component Gallery in Figure 24–1 . Using ADF Graph Components 24-3 Figure 24–2 Horizontal Bar Graph in Visual Editor When editing a graph in the visual editor, graph components such as the title, legend area, plot area, background, axis labels, and display of bars can be selected to display a context menu with editing choices. For more information about editing a graph in the visual editor, see Section 24.6, Customizing the Appearance of Graphs. Graphs are displayed in a default size of 400 X 300 pixels. You can customize the size of a graph or specify dynamic resizing to fit an area across different browser window sizes. When graphs are displayed in a horizontally or vertically restricted area, for example in a web page sidebar, the graph is displayed in a fully featured, although, simplified display. To support visually impaired users who read web pages with a screen reader, graphs are automatically replaced with pivot tables when screen reader mode is enabled for the application. Screen readers can more easily navigate and read the data in a pivot table than in a graph. For information about enabling screen reader mode, see Section 22.2, Exposing Accessibility Preferences. For information about ADF pivot tables, see Section 26.1, Introduction to the ADF Pivot Table Component. By default, graphs are displayed using a Flash player as specified in the graph component imageFormat attribute. Alternatively, graphs can be displayed using a Portable Network Graphics PNG output format, as in the case when plug-ins are not allowed on client machines, or in bidirectional locales. Although static rendering is fully supported when using a PNG output format, certain interactive features are not available including: ■ Animation ■ Context menus ■ Drag and drop gestures ■ Interactive pie slice behavior ■ Reference object hover behavior ■ Popup support ■ Selection ■ Series rollover behavior ■ Time selector