Introduction to the Graph Component

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. 24-6 Web User Interface Developers Guide for Oracle Application Development Framework ■ dvt:sparkChart: Creates a simple, condensed graph that displays trends or variations in a single data value, typically stamped in the column of a table or in line with related text. Sparkcharts have basic conditional formatting. ■ dvt:stockGraph: Creates a graph in which data shows the high, low, and closing prices of a stock. Each stock marker displays two to four separate values not counting the optional volume marker depending on the specific type of stock graph chosen.

24.2.2 Common Graph Child Tags

Types of common customization and related child tags include: ■ Animation effects for graphs: dvt:animationOnDisplay and dvt:animationOnDataChange tags. ■ Alerts that highlight a data point with a custom icon: dvt:alertSet and dvt:alert tags. ■ Annotations that insert notes for specific data points: dvt:annotationSet and dvt:annotation tags. ■ Appearance and titles for the graph: dvt:background, dvt:graphFont, dvt:graphFootnote, dvt:graphPlotArea, dvt:graphSubtitle, and dvt:graphTitle tags. ■ Colors and appearance of bars, areas, lines, and pie slices also known as series items: dvt:seriesSet and dvt:series tags. ■ Formatting categorical attributes in the ordinal axis and marker tooltips: dvt:attributeFormat. ■ Legend appearance: dvt:legendArea, dvt:legendText, and dvt:legendTitle tags. ■ Marker customization related to each axis: dvt:markerText, dvt:x1Format, dvt:y1Format, dvt:y2Format, and dvt:zFormat tags. ■ Reference lines and reference areas: dvt:referenceObjectSet and dvt:referenceObject tags. ■ Customization for the ordinal axis also known as the category axis used with bar, area, combination, line, radar, and stock graphs with group labels: dvt:o1Axis, dvt:o1MajorTick, dvt:o1TickLabel, and dvt:o1Title tags. ■ Customization for the x-axis used with scatter and bubble graphs with numerical labels: dvt:x1Axis, dvt:x1MajorTick, dvt:x1TickLabel, dvt:x1MinorTick, and dvt:x1Title tags. ■ Customization for the y1-axis: dvt:y1Axis, dvt:y1BaseLine, dvt:y1MajorTick, dvt:y1TickLabel, dvt:y1MinorTick, and dvt:y1Title tags. Note: In this release sparkcharts are created by inserting the dvt:sparkChart tag from the Component Palette and then binding the component to data. Sparkcharts cannot be created using the Data Controls panel. Using ADF Graph Components 24-7 ■ Customization for the y2-axis: dvt:y2Axis, dvt:y2BaseLine, dvt:y2MajorTick, dvt:y2TickLabel, dvt:y2MinorTick, and dvt:y2Title tags.

24.2.3 Graph-Specific Child Tags

Types of graph-specific customizations and related child tags include: ■ Gradients that are used for a graph only in conjunction with dvt:background, dvt:legendArea, dvt:graphPlotArea, dvt:graphPieFrame, dvt:series, dvt:referenceObject, or dvt:timeSelector subcomponents: dvt:specialEffects and dvt:gradientStopStyle tags. ■ Interactivity specifications for subcomponents of a graph: dvt:shapeAttrbutesSet and dvt:shapeAttributes tags. ■ Formatting numerical data values for graph: dvt:sliceLabel, dvt:x1TickLabel, dvt:y1TickLabel, dvt:y2TickLabel, dvt:x1Format, dvt:y1Format, dvt:y2Format, dvt:zFormat, and dvt:stockVolumeFormat. ■ Time axis customization for area, bar, combination, line, and stacked bar graphs: dvt:timeAxisDateFormat, and dvt:timeSelector tags. ■ Selection of a range on a time axis for master-detail graphs: dvt:timeSelector tag. ■ Pareto graphs: dvt:paretoLine and dvt:paretoMarker tags. ■ Pie graphs: dvt:graphPieFrame, dvt:pieFeeler, dvt:slice, and dvt:sliceLabel tags. ■ Sparkcharts: dvt:sparkItem tag provides data for the sparkchart. ■ Stock graphs: dvt:stockMarker, dvt:stockVolumeformat, and dvt:volumeMarker tags.

24.2.4 Child Set Tags

Child set tags include: ■ dvt:alertSet tag: Wraps dvt:alert tags that define an additional data point that needs to be highlighted with a separate symbol, such as an error or warning. ■ dvt:annotationSet tag: Wraps dvt:annotation tags that define an annotation on a graph. An annotation is associated with a specific data point on a graph ■ dvt:referenceObjectSet tag: Wraps dvt:referenceObject tags that define a reference line or a reference area for a graph. You can define an unlimited number of reference objects for a given graph. ■ dvt:seriesSet tag: Wraps dvt:series tags that define a set of data markers or series on a graph. ■ dvt:shapeAttributesSet tag: Wraps dvt:shapeAttributes tags that specified interactivity properties on a subcomponent of a graph. In each case, during design, you must create the wrapper tag first, followed by a related tag for each item in the set. Example 24–2 shows the sequence of the tags when you create a set of alert tags to define two alert points for an area graph. 24-8 Web User Interface Developers Guide for Oracle Application Development Framework Example 24–2 Sample Code for a Set of Alert Tags dvt:areaGraph id=areaGraph1 subType=AREA_VERT_ABS dvt:background dvt:specialEffects dvt:background dvt:graphPlotArea dvt:alertSet dvt:alert xValue=Boston yValue=3.50 yValueAssignment=Y1AXIS imageSource=myWarning.gif dvt:alert xValue=Boston yValue=5.50 yValueAssignment=Y1AXIS imageSource=myError.gif dvt:alertSet dvt:o1Axis dvt:y1Axis dvt:legendArea automaticPlacement=AP_NEVER dvt:areaGraph

24.3 Understanding Data Requirements for Graphs

Data requirements for graphs differ with graph type. Data requirements can be any of the following kinds: ■ Geometric: Some graph types need a certain number of data points in order to display data. For example, a line graph requires at least two groups of data because a line requires at least two points. ■ Complex: Some graph types require more than one data point for each marker which is the component that actually represents the data in a graph. A scatter graph, for example, needs two values for each group so that it can position the marker along the x-axis and along the y-axis. If the data that you provide to a graph does not have enough data points for each group, the graph component does its best to display a graph. ■ Logical: Some graph types cannot accept certain kinds of data. The following examples apply: – Negative data issues: Do not pass negative data to a pie graph or to a percentage bar, line, or area graph. Markers will not display for negative data in percentage graphs. – Null or zero data: You cannot see markers for null data because markers will not be produced for null data. Also, if a graph receives zero data and the axis line is at zero, the marker is not visible. However, if the axis line is at nonzero, the zero marker is visible. – Insufficient sets or series of data: Dual-Y graphs require a set of data for each y-axis. Usually, each set represents different information. For example, the y1-axis might represent sales for specific countries and time periods, while the y2-axis might represent total sales for all countries. If you pass only one set of y-axis data, then the graph cannot display data on two different Y-axes. It displays the data on a single y-axis. Similar graphs share similar data requirements. For example, you can group the following graphs under the category of area graphs: ■ Absolute area graph. ■ Stacked area graph. ■ Percentage area graph.