Gantt Chart Hierarchy Viewer

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