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

Part Number E16181-04
Go to Documentation Home
Home
Go to Table of Contents
Contents
Go to Feedback page
Contact Us

Go to previous page
Previous
Go to next page
Next
PDF · Mobi · ePub

21 Introduction to ADF Data Visualization Components

This chapter describes the ADF Data Visualization components, an expressive set of interactive ADF Faces components. The functionality shared across the components and with other ADF Faces components is also highlighted. 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:

21.1 About 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:

Data visualization components include: graph, gauge, pivot table, geographic map, thematic map, Gantt charts, and hierarchy viewer.

The prefix dvt: occurs at the beginning of each gauge component name indicating that the component belongs to the ADF Data Visualization Tools (DVT) tag library.

21.1.1 Graph Component Use Cases and Examples

The 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 graph component:

  • Area graph (areaGraph): 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 (barGraph): 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 (horizontalBarGraph): 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 (bubbleGraph): 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 (comboGraph): 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 (funnelGraph): 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 (lineGraph): 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 (paretoGraph): 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 (pieGraph): 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 (radarGraph): 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 (scatterGraph): 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.

  • Sparkchart (sparkChart): Creates a simple, condensed graph that displays trends or variations, often in the column of a table or inline with text. Sparkcharts are simple in design, with limited features and formatting options, showing as much data as possible.

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

Figure 21-1 show an application dashboard that illustrates:

  • bar graph

  • pie graph with exploded slice

Figure 21-1 Dashboard with Bar Graph and Pie Graph

Dashboard with bar and pie graphs.

Figure 21-2 shows an application dashboard that illustrates, 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 21-2 Dashboard with Line, Pie, and Bar Graphs

Dashboard with line, pie, and bar graphs.

Figure 21-3 shows a line sparkchart displaying sales trends in a table column.

Figure 21-3 Sparkchart of Sales Trends

sparkchart displaying sales trends

For more information including additional use cases and examples, see Chapter 22, "Using Graph Components."

21.1.2 Gauge Component Use Cases and Examples

The gauge (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 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.

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

Figure 21-4 Dial Gauges set with Thresholds

Dial gauges set wiith thresholds

Figure 21-5 shows a set of status meter gauges set with thresholds.

Figure 21-5 Status Meter Gauges set with Thresholds

Status meter gauges set with thresholds.

For more information including additional use cases and examples, see Chapter 23, "Using Gauge Components."

21.1.3 Pivot Table Use Cases and Examples

The pivot table (pivotTable) produces a grid that supports multiple layers of data labels on rows or columns. An optional pivot filter bar (pivotFilterBar) 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.

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 sorting of rows at runtime. Figure 21-6 shows an example pivot table with a pivot filter bar.

Figure 21-6 Pivot Table with Pivot Filter Bar

Pivot table with pivot filter bar.

For more information including additional use cases and examples, see Chapter 24, "Using Pivot Table Components."

21.1.4 Geographic Map Use Cases and Examples

The geographic map (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 21-7 shows a geographic map with color theme, pie graph theme, and point theme.

Figure 21-7 Geographic Map with Color Theme, Pie Graph Theme, and Point Theme

goegraphic map for a product

For more information including additional use cases and examples, see Chapter 25, "Using Map Components."

21.1.5 Thematic Map Component Use Cases and Examples

A thematic map (thematicMap) component represents business data as patterns in stylized areas or associated markers and does not require a connection to a map viewer service. Thematic maps focus on data without the geographic details in a geographic map. The thematic map is packaged with prebuilt base maps including a USA base map, a world base map, as well as base maps for continents and regions of the world such as EMEA and APAC. The thematic map component does not require a map service to display a base map.

For example, you could use a USA base map with a states map layer to display the preferences in each state for a particular brand of soft drink using colors as displayed in Figure 21-8. The example illustrates thematic map default features including a data bound legend and labels associated with the stylized areas.

Figure 21-8 Thematic Map Displaying Product Preferences by Area

Thematic map displaying product preferences by styled area.

For more information including additional use cases and examples, see Chapter 25, "Using Map Components."

21.1.6 Gantt Chart Component Use Cases and Examples

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 (projectGantt): 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 (resourceUtilizationGantt): 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 (schedulingGantt): 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 21-9 shows a project Gantt view of staff resources and schedules.

Figure 21-9 Project Gantt

project gantt of staff assignments

For more information including additional use cases and examples, see Chapter 26, "Using Gantt Chart Components."

21.1.7 Hierarchy Viewer Component Use Cases and Examples

The hierarchy viewer (hierarchyViewer) 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 21-10.

Figure 21-10 Hierarchy Viewer as Organizational Chart

Hierarchy viewer as organizational chart.

For more information including additional use cases and examples, see Chapter 27, "Using Hierarchy Viewer Components."

21.1.8 Additional Functionality for Data Visualization Components

You may find it helpful to understand other ADF Faces features before you data bind your data visualization components. Additionally, once you have added a data visualization component to your page, you may find that you need to add functionality such as validation and accessibility. Following are links to other functionality that data visualization components use:

  • Partial page rendering: You may want a DVT component to refresh to show new data based on an action taken on another component on the page. For more information, see Chapter 8, "Rerendering Partial Page Content."

  • Personalization: Users can change the way the DVT components display at runtime, those values will not be retained once the user leaves the page unless you configure your application to allow user customization. For more information, see Chapter 32, "Allowing User Customization on JSF Pages."

  • Accessibility: You can make your DVT components accessible. For more information, see Chapter 30, "Developing Accessible ADF Faces Pages."

  • Skins and styles: You can customize the appearance of DVT components using an ADF skin that you apply to the application or by applying CSS style properties directly using a style-related property (styleClass or inlineStyle). For more information, see Chapter 28, "Customizing the Appearance Using Styles and Skins."

  • Placeholder data controls: If you know the DVT components on your page will eventually use ADF data binding, but you need to develop the pages before the data controls are ready, then you should consider using placeholder data controls, rather than manually binding the components. Using placeholder data controls will provide the same declarative development experience as using developed data controls. For more information, see the "Designing a Page Using Placeholder Data Controls" chapter in the Oracle Fusion Middleware Fusion Developer's Guide for Oracle Application Development Framework.

21.2 Common Functionality in Data Visualization Components

Data visualization components share much of the same functionality, such as how data is delivered, automatic partial page rendering (PPR), the image format used to display the component, and how data can be displayed and edited. It is important that you understand this shared functionality and how it is configured before you use these components.

21.2.1 Content Delivery

Data visualization components including graph, gauge, pivot table, Gantt chart, thematic map, and hierarchy viewer can be configured for how data is delivered from the data source. The data con be delivered to the components either immediately upon rendering, as soon as the data is available, or lazily fetch after the shell of the component has been rendered. By default all data visualization components, with the exception of the geographic map, support the delivery of content from the data source when it is available. The contentDelivery attribute of these components is set to whenAvailable by default.

Data visualization components based on a tree or tree table model including Gantt charts, pivot tables, and the hierarchy viewer are virtualized, meaning not all the rows, columns, or levels that are there for the component on the server are delivered to and displayed on the client. You configure these components to fetch a certain number of rows, columns, or levels at a time from your data source. Use these attributes to configure fetch size:

  • Pivot table:

    • rowFetchSize: Specifies the number of rows in a data fetch block. The default value is 25.

    • columnFetchSize: Specifies the number of columns in a data fetch block. The default value is 10.

  • Hierarchy Viewer:

    • levelFetchSize: Specifies the number of child nodes that will be fetched and displayed at a single time for each expanded parent node. Additional child nodes may be fetched and displayed by using the lateral navigation controls shown in the hierarchy viewer. The default value is 25.

  • Gantt charts:

    • fetchSize: Specifies the number of rows in the data fetch block. The default value is 25.

    • horizontalFetchSize: Specifies the size of the horizontal data window in number of pixels in which the data are fetched. Only task bars within this data window would be rendered. In contrast with fetchSize, which provides vertical virtualization, horizontalFetchSize provides horizontal virtualization.

For lazy delivery, when a page contains one or more of these components, the page initially goes through the standard lifecycle. However, instead of fetching the data during that initial request, a special separate partial page rendering (PPR) request is run, and the value of the fetch size for the component is then returned. Because the page has just been rendered, only the Render Response phase executes for the components, allowing the corresponding data to be fetched and displayed. When a user's actions cause a subsequent data fetch (for example scrolling in a pivot table grid for another set of rows), another PPR request is executed.

When content delivery is configured to be delivered when it is available, the framework checks for data availability during the initial request, and if it is available, it sends the data to the component. If it is not available, the data is loaded during the separate PPR request, as it is with lazy delivery.

Performance Tip:

Lazy delivery should be used when a data fetch is expected to be an expensive (slow) operation, for example, slow, high-latency database connection, or fetching data from slow non-database data sources like web services. Lazy delivery should also be used when the page contains a number of components other than a data visualization component. Doing so allows the initial page layout and other components to be rendered first before the data is available.

Immediate delivery should be used if the data visualization component is the only context on the page, or if the component is not expected to return a large set of data. In this case, response time will be faster than using lazy delivery (or in some cases, simply perceived as faster), as the second request will not go to the server, providing a faster user response time and better server CPU utilizations. Note that for components based on a tree or tree table model, only the value configured to be the fetch block will be initially returned. As with lazy delivery, when a user's actions cause a subsequent data fetch, the next set of rows are delivered.

The whenAvailable delivery provides the additional flexibility of using immediate when data is available during initial rendering or falling back on lazy when data is not initially available.

For more information about setting the fetch size for components based on the tree or tree table model, see Section 21.2.1, "Content Delivery."

21.2.2 Automatic Partial Page Rendering (PPR)

ADF Faces supports Partial Page Rendering (PPR), which allows certain components on a page to be rerendered without the need to rerender the entire page. In addition to built-in PPR functionality, you can configure components to use cross-component rendering, which allows you to set up dependencies so that one component acts as a trigger and another as the listener. For more information, see Section 8.1, "About Partial Page Rendering."

By default, ADF data visualization components support automatic PPR, where any component whose values change as a result of backend business logic is automatically rerendered. If your application uses the Fusion technology stack, you can enable the automatic partial page rendering feature on any page. For more information, see the "What You May Need to Know About Automatic Partial Page Rendering" section of the Oracle Fusion Middleware Fusion Developer's Guide for Oracle Application Development Framework.

21.2.3 Embedded Fonts for Graph and Gauge Components

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.

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 21-1 defines the Georgia font with a Bold and Italic combination.

Example 21-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="application/x-font-truetype")]
  private statis car font1:Class;
  public function fGeorgiaBoldItalic() {
    Font registerFont(font1);
}
  }
}

You can set graph and gauge embedded font attributes as follows:

  • flashDefaultFontLoading: Specifies whether default fonts are loaded in FLASH from the middle tier. Valid values are:

    • FLASH_DEFAULT_FONT_LOADING_ALL: The default value. Specify to use the embedded font. The application is responsible to make sure that the correct fonts are specified and available on the system.

    • FLASH_DEFAULT_FONT_LOADING_NONE: Specify not to use the embedded font.

  • fontURLMap: Use for gauge components. Provides a mapping of font names and font SWF file URLs in the form of a java.util.Map object. This map should have the font names as the keys, and the font URLs as the values.

21.2.4 Graph and Gauge Context Menus

Context menus can be defined for graph and gauge components using these context menu facets:

  • bodyContextMenu: Specifies a context menu that is displayed on non-selectable elements in the component.

  • contextMenu: Specifies a context menu that is displayed on any selectable element in the component.

  • multiSelectContextMenu: Specifies a content menu that is displayed when multiple elements are selected in the component.

Each facet supports a single child component. For all of these facets to work, selection must be enabled and supported for the specific graph or gauge type. Context Menus are currently only supported in Flash.

Due to technical limitations when using the Flash rendering format, context menu contents are currently displayed using the Flash Player's context menu. This imposes several limitations defined by the Flash Player:

  • Flash does not allow for submenus it its context menu.

  • Flash limits custom menu items to 15. Any built-in menu items for the component, for example, a pie graph interactiveSliceBehavior menu item, will count towards the limit,

  • Flash limits menu items to text-only. Icons or other controls possible in ADF Faces menus are not possible in Flash menus.

  • Each menu caption must contain at least one visible character. Control characters, new lines, and other white space characters are ignored. No caption can be more than 100 characters long.

  • Menu captions that are identical to another custom item are ignored, whether the matching item is visible or not. Menu captions are compared to built-in captions or existing custom captions without regard to case, punctuation, or white space.

  • The following captions are not allowed, although the words may be used in conjunction with other words to form a custom caption: Save, Zoom In, Zoom Out, 100%, Show All, Quality, Play, Loop, Rewind, Forward, Back, Movie not loaded, About, Print, Show Redraw Regions, Debugger, Undo, Cut, Copy, Paste, Delete, Select All, Open, Open in new window, and Copy link.

  • None of the following words can appear in a custom caption on their own or in conjunction with other words: Adobe, Macromedia, Flash Player, or Settings.

Additionally, since the request from Flash for context menu items is a synchronous call, a server request to evaluate EL is not possible when the context menu is invoked. To provide context menus that vary by selected object, the menus will be pre-fetched if the context menu popup uses the setting contentDelivery="lazyUncached". For context menus that may vary by state, this means that any EL expressions within the menu definition will be called repeatedly at render time, with different selection and currency states. When using these context menus that are pre-fetched, the application must be aware of the following:

  • Long running or slow code should not be executed in any EL expression that may be used to determine how the context menu is displayed. This does not apply to af:commandMenuItem attributes that are called after a menu item is selected, such as actionListener.

  • In the future, if the Flash limitations are solved, the ADF context menu may be displayed in place of the Flash context menu. To ensure upgrade compatibility, you should code such that an EL expression will function both in cases where the menu is pre-fetched, and also where the EL expression is evaluated when the menu is invoked. It is recommended that the only component state that applications rely on are selection and currency.

21.2.5 Screen Reader Support

All data visualization components provide attributes that support descriptive text about the component. Setting the appropriate attribute for the component is required for supporting the screen reader mode. Set the following attributes for data visualization components:

  • shortDesc attribute: Use for all graph and gauge components.

  • summary attribute: Use for pivot table, Gantt chart, geographic and thematic map, and hierarchy viewer components.

21.2.6 Text Resources from Application Resource Bundles

JDeveloper supports easy localization of ADF Faces and data visualization components using the abstract class java.util.ResourceBundle to provide locale-specific resources.

Data visualization components may include text that is part of the component, for example the af:table component uses the resource string af_table.LABEL_FETCHING for the message text that displays in the browser while the af:table component fetches data during the initial load of data or while the user scrolls the table. JDeveloper provides automatic translation of these text resources into 28 languages. These text resources are referenced in a resource bundle. If you set the browser to use the language in Italy, any text contained within the components will automatically be displayed in Italian

For any text you add to a component, for example if you define the title of a pieGraph component by setting the text attribute on its child graphTitle component, you must provide a resource bundle that holds the actual text, create a version of the resource bundle for each locale, and add a <locale-config> element to define default and support locales in the application's faces-config.xml file. You must also add a <resource-bundle> element to your application's faces-config.xml file in order to make the resource bundles available to all the pages in your application. Once you have configured and registered a resource bundle, the Expression Language (EL) editor will display the key from the bundle, making it easier to reference the bundle in application pages.

To simplify the process of creating text resources for text you add to ADF components, JDeveloper supports automatic resource bundle synchronization for any translatable string in the visual editor. When you edit components directly in the visual editor or in the Property Inspector, text resources are automatically created in the base resource bundle. For more information, see Section 29.2, "Using Automatic Resource Bundle Integration in JDeveloper."

Note:

Any text retrieved from the database is not translated.

For data visualization components with title and label child components, you can also create and add text resources to a resource bundle by using the attribute dropdown list to open a Select Text Resource dialog to select or add a translatable string from an application resource bundle. Alternatively, you can select Expression Builder to open the Expression Language (EL) editor to create an expression to be executed at runtime for the title or label.

21.3 Providing Data for ADF Data Visualization Components

In JDeveloper you can add any Data Visualization component to your JSF page using UI-first development and then later bind the data manually you wish to display using ADF data controls or managed beans. In this case the component is added to the page by dragging from the Component Palette, and the Property Inspector is used to bind the data manually.

Alternatively, you can use data-first development and create the component using an ADF data control that will handle the data binding for you. In this case the component is added to the page by dragging from the Data Controls panel, and completing data binding dialogs to configure the display of data.

For example, when you are designing your page using simple UI-first development, you use the Component Palette to add a graph to a JSF page. When you drag and drop a graph component onto the page, the Component Gallery displays available categories of graph types, with descriptions, to provide visual assistance when creating graphs. You can also specify a quick-start layout of the graph's title and legend. Figure 21-11 shows the Component Gallery that displays when creating a pie graph from the Component Palette.

Figure 21-11 Component Gallery for Pie Graphs from Component Palette

Component Gallery for pie graphs from Component Palette.

For information about creating Data Visualization components using UI-first development, understanding component data requirements, configuring DVT parent and child components, customizing the appearance of components, and adding special effects and interactivity to components, see the following chapters in this part of the guide:

You can also create and data bind a graph by dragging a data control from the Data Controls Panel. A Component Gallery displays available graph categories, types, and descriptions to provide visual assistance when designing graphs and defining a quick layout. Figure 21-12 shows the Component Gallery that displays when creating a line graph from a data control.

Figure 21-12 Component Gallery for Line Graphs from Data Controls Panel

Component Gallery for line graphs from Data Controls Panel.

Figure 21-13 shows the Create Line Graph dialog you use to bind the data collection attributes to the graph component.

Figure 21-13 Create Line Graph Data Binding Dialog

Create Line Graph data binding dialog

All data visualization components can be bound to data collections in an ADF data control. For information and examples of data binding these components to data controls, see the following: