Downloading Custom Fonts for Flash Images

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 24-4 Web User Interface Developers Guide for Oracle Application Development Framework ■ Zoom and scroll live client-side scrolling

24.2 Understanding the Graph Tags

Because of the many graph types and the significant flexibility of the graph components, graphs have a large number of DVT tags. The prefix dvt: occurs at the beginning of each graph tag name indicating that the tag belongs to the ADF Data Visualization Tools DVT tag library. The following list identifies groups of tags related to the graph component: ■ Graph-specific tags: The 13 graph-specific tags provide a convenient and quick way to create one commonly used graph type. They are represented in the Component Gallery as categories of graphs with one or more types, and a variety of quick-start layout options from which to choose. For a list and description of these tags, see Section 24.2.1, Graph-Specific Tags. ■ Common graph child tags: These tags are supported by most graph types to provide customization. For a list and description of these tags, see Section 24.2.2, Common Graph Child Tags. ■ Graph-type child tags: These tags apply either to specific graph types or to specific parts of a graph. For a list and description of these tags, see Section 24.2.3, Graph-Specific Child Tags. ■ Child set tags: These tags wrap a set of an unlimited number of related tags. For a list and description of these tags, see Section 24.2.4, Child Set Tags. ■ Graph tag: Although available, but not the preferred method, the dvt:graph tag lets you create an instance of a graph for any supported graph type. Even though some graph attributes and some graph child tags are meaningful only for certain graph types, the graph tag has a complete set of graph attributes and supports the use of all graph child tags. Therefore, the dvt:graph tag provides full flexibility for choosing graph types, customizing graphs, and changing from one graph type to another. For complete descriptions of all the tags, their attributes, and a list of valid values, consult the DVT tag documentation. To access this documentation for a specific tag in JDeveloper, select the tag in the Structure window and press F1. To access the full ADF Data Visualization Tools tag library in JDeveloper Help, expand the Javadoc and Tag Library References node in the online Help Table of Contents and click the link to the tag library in the JDeveloper Tag Library Reference topic.

24.2.1 Graph-Specific Tags

There are 13 graph-specific tags: ■ dvt:areaGraph: Supports an area 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. Note: In JDeveloper the dvt:graph tag is not available to declaratively insert from the Component Palette. The tag and its child tags must be typed into the source code of a.jspx file. Using ADF Graph Components 24-5 ■ dvt:barGraph: Supports a bar graph in which data is represented as a series of vertical bars. Use bar graphs to examine trends over time or to compare items at the same time, such as sales for different product divisions in several regions. ■ dvt:horizontalBarGraph: Creates a graph that displays bars horizontally along the y-axis. Use horizontal bar graphs to provide an orientation that allows you to show trends or compare values. ■ dvt:bubbleGraph: Creates a graph in which data is represented by the location and size of round data markers bubbles. Use bubble graphs 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. ■ dvt:comboGraph: Creates a graph that uses different types of data markers bars, lines, or areas to display different kinds of data items. Use combination graphs to compare bars and lines, bars and areas, lines and areas, or all three combinations. ■ dvt: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 cone-shaped section. 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 the funnel graph to watch a process where the different sections of the funnel represent different stages in the sales cycle. ■ dvt: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 the Americas, Europe, and Asia. Use line graphs to compare items over the same time. ■ dvt: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 Pareto graphs to identify and compare the sources of defects. ■ dvt: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 pie graphs to show the relationship of parts to a whole such as how much revenue comes from each product line. ■ dvt:radarGraph: Creates a graph that appears as a circular line graph. Use radar graphs to show patterns that occur in cycles, such as monthly sales for the last three years. ■ dvt:scatterGraph: Creates a graph in which data is represented by the location of data markers. Use scatter graphs to show correlation between two different kinds of data values such as sales and costs for top products. Use scatter graphs in particular to see general relationships among a number of items. A scatter graph can display data in a directional manner as a polar graph.