<dvt:areaGraph>

dvt:areaGraph areaGraph area graph

UIComponent class: oracle.adf.view.faces.bi.component.graph.UIGraph
Component type: oracle.dss.adf.graph.Graph (areaGraph)

Overview

Use the <dvt:areaGraph> tag to create an ADF data visualization area graph. An area graph is one in which data is represented as lines with the area underneath them filled in. There are many types of Area graphs. Here is a list of subtypes that a <dvt:areaGraph> tag supports -

• AREA_VERT_ABS - An absolute area graph.
• AREA_VERT_ABS_SPLIT2Y - An absolute area graph with split dual-Y axis.
• AREA_VERT_PERCENT - A percent area graph.
• AREA_VERT_STACK - A stacked area graph.
• AREA_VERT_STACK_SPLIT2Y - A stacked area graph with split dual-Y axis.

The <dvt:areaGraph> tag provides a complete set of attributes and child tags required to create any area graph. Use the Area graph's "subType" attribute to specify the graph type. One of the most commonly useful child tags is the <dvt:series> tag. Use a set of <dvt:series> tags, within a <dvt:seriesSet> tag, to change area marker colors, for instance.

The Graph's layout is dominated by five major components: title, subtitle, footnote, legendArea, and plotArea. The plotArea plots the data and is always rendered, but the other four components are optional, and can be placed in different locations within the graph. Within the area allocated to the whole graph, space is first allocated to the titles, if present. The title and the subtitle are displayed side by side at the top of the graph by default, and the footnote is displayed at the bottom of the graph. Space is next allocated for the legendArea, which displays the marker color and label associated with each series. It can be positioned in one of four locations: left, right, top and bottom. The legend can use as much as 40% of the graph space. The plotArea and its labels occupy the remaining space.

Data Model

Use the data binding dialogs to bind the simple graph tags to a data control, which is typically based on a rowset (see data binding documentation for details). Another common way to provide data for the graph is to use the "tabularData" attribute to create a grid. This requires use of a backing or managed bean.

The graph requires a simple grid of numeric data points to plot a graph. The grid's row and column labels are used to identify components within the graph. By default, the rows appear as the series and the columns appear as the groups. An area graph is plotted as lines with the area underneath them filled in. This graph requires one or more series with at least two groups of data because a line segment requires at least two points to define it. In a stacked area graph, the values of each data series are added to the previous one, thus the size of the stack represents a cumulative total of all series. A Percent Area graph is a stacked graph that displays the percentage of a given series relative to the cumulative total of all series. This graph cannot have negative values.

Series

The rows in the grid usually appear as the series in an area graph. The graph legend identifies each series in the graph, with a labeled symbol that shows color and other appropriate area marker attributes. Use a set of <dvt:series> tags, within a <dvt:seriesSet> tag, to change area marker colors. The <dvt:seriesSet> tag contains attributes that change the default attributes for all series. The <dvt:seriesSet> tag also contains the <dvt:series> tags that override attributes for individual series. Commonly used series attributes are - color, assignedToY2 (change axis assignment on a Dual-Y graph), etc.

Here is an example of a dual-Y Area graph with a <dvt:seriesSet> tag that defines y2Axis assignment for all series. The <dvt:series> child tag overrides this assignment for the first series in the graph. -

                <dvt:areaGraph id="areaGraph1" subType="AREA_VERT_ABS_SPLIT2Y">
                  <dvt:seriesSet defaultAssignedToY2="DY2_TRUE">
                    <dvt:series index="0" assignedToY2="false"/>
                  </dvt:seriesSet>
                </dvt:areaGraph>
        

SeriesEffect

Use the graph's "seriesEffect" attribute to add predefined gradient effects on areas.

Series highlighting

Use the graph's "seriesRolloverBehavior" attribute to turn on highlighting behavior when the cursor moves over an area marker or a series-specific legend component.

MarkerText

The markerText tag defines if and where the marker text should appear in relation to area markers. Use the attribute "markerTextPlace" to specify the location of the text.

Titles

The title and the subtitle, if present, are displayed side by side at the top of the graph by default. Use the graph's "customLayout" attribute to change this default setting. The footnote, if present, is displayed at the bottom of the graph.

Legend

The legend displays the marker and associated color of each series. It also displays the legend title and lists any reference objects that are present. The legend can be positioned in one of four different locations: left, right, top and bottom. Use the attribute "alongGraphEdge" to attach it to the edge of the graph. The legend can be removed with the "rendered" attribute.

PlotArea and Axes

Area graphs plot the data within the plotArea. The plotArea integrates the axes and the data markers. Generally the horizontal axis is an ordinal/category axis (o1Axis), which shows categories like cities or products. This axis can be a time axis if an Area graph is displaying dates (instance of java.util.Date). The primary vertical axis is a data axis (y1Axis). Dual-Y graphs typically also display the y2Axis. Each axis, whether ordinal or data, has tick labels and an axis title associated with it. The y1Axis is associated with y1TickLabel and y1Title, for instance. See related component tags for detail.

Time Axis

The Area graph displays a time axis when dates (object type java.util.Date) are specified for the column labels. Several timeXXX attributes are defined on the graph tag to customize the time axis. The child tag timeAxisDateFormat controls the format in which the time axis labels are displayed.

Time Selector

Use the <dvt:timeSelector> tag to activate the graph's TimeSelector feature, which allows an end user to select a time range on a time axis. This is typically used in master-detail graphs where the selected time range in the master graph drives the content of a detail graph, table, or other component. A backing or managed bean is required to use this feature.

Graph Size

The default graph size is 300 pixels tall by 400 pixels wide. Change this using the "inlineStyle" attribute. Set inlineStyle="width:500px; height:350px;", for instance, to change the graph size to 350 pixels tall by 500 pixels wide. The width and the height can also be specified in percent. Use percent for height only when the graph is added to an explicitly sized container or one that manages layout, otherwise graph will behave differently for different browsers. Use the "dynamicResize" attribute to resize the graph based on its container size.

Animation

Several graph types support animation. Animate the graph during initial rendering using the attribute "animationOnDisplay". The graph can also be animated when the data changes using the attribute "animationOnDataChange". Use the attribute "animationDuration" to specify the animation duration. The indicator colors for increase and decrease in the data value are specified by attributes "animationUpColor" and "animationDownColor", respectively.

Alerts

Use a <dvt:alert> tag for the graph to define an additional data point that needs to be highlighted with a separate symbol, such as for an error or warning. Wrap all <dvt:alert> tags in a <dvt:alertSet> tag.

Annotations

Use a <dvt:annotation> tag to provide an annotation for a specific data point. Multiple annotations can be defined for a single data point. Wrap all <dvt:annotation> tags in a <dvt:annotatinSet> tag.

ReferenceObject

Use the <dvt:referenceObject> tag to create either a reference line or a reference area. The reference object can be associated with any data axis or series. Multiple reference objects can be associated with a single series or an axis. Use the attribute "location" to specify whether the referenceObject should displayed in the front or the back of the data markers. Use graph's "referenceObjectDisplay" attributes to specify when the referenceObject would be displayed: the value "RO_AUTOMATIC" displays it only when the mouse hovers over the component with which the referenceObject is defined. Wrap all <dvt:referenceObject> tags in a <dvt:referenceObjectSet> tag.

Interactivity

Use the shapeAttributes tag to specify interactivity on an individual graph component. A backing or managed bean is required to use this feature.

Here is an example of an area marker in an area graph using a clickListener to display series information:

                <dvt:areaGraph id="areaGraph1" subType="AREA_VERT_ABS">
                 <dvt:shapeAttributesSet>
                  <dvt:shapeAttributes component="GRAPH_AREAMARKER" clickable="true" clickListener="#{clickListener.processClick}"/>
                 </dvt:shapeAttributesSet>
                </dvt:areaGraph>
        

The "processClick" method in the backing bean will look like:

        public void processClick(ClickEvent event) {   
                ComponentHandle handle = event.getComponentHandle();
                if (handle instanceof SeriesComponentHandle) {
                        // Get the series attributes
                        Attributes [] seriesInfo = ((SeriesComponentHandle)handle).getSeriesAttributes();
                        String data = "";
                        if(seriesInfo != null) {
                                for(Attributes attrs: seriesInfo) {
                                        data += "Series value: " + attrs.getValue(Attributes.LABEL_VALUE);
                                        data += " Series name: " + attrs.getValue(Attributes.LABEL_ATTRIBUTE);
                                        data += " Series value id: " + attrs.getValue(Attributes.ID_VALUE);
                                        data += " Series name id: " + attrs.getValue(Attributes.ID_ATTRIBUTE);
                                }
                                System.out.println(data);
                        }
                }
        }
        

Wrap all <dvt:shapeAttributes> tags in a <dvt:shapeAttributesSet> tag.

Tooltips

Tooltips are useful to display identification and or detail information for data markers. They can be very useful in smaller graphs without enough space to display markerText. Use attributes "markerTooltipType", "seriesTooltipLabelType", and "groupTooltipLabelType" to customize tooltip content. The graph automatically displays tooltips for components like title, subtitle, footnote, legendText, and annotations when their text is truncated. There is no option to change this behavior.

Zoom and Scroll

Give end users the ability to zoom in on and scroll through a data set that may be too large or complex to fit comfortably within the area allocated to the graph using the "zoomDirection" attribute. Zoom and scroll may be enabled for horizontal and or vertical axes. The "scrollbarPresenceGroups" attribute provides control over when a scroll bar appears for the group axis: the horizontal axis in Area graphs, for instance. The "scrollbarPresenceX1", "scrollbarPresenceY1", and "scrollbarPresenceY2" attributes control the appearance of scroll bars for the various data axes.

Font

The <dvt:graphFont> tag is used for font formatting. Text color, style, size, and font name can be specified using this tag. This tag is used as a child tag for any of the graph's text component tags. All text component tags have other formatting attributes like horizontal and vertical alignment, text string, and whether or not the text should be rendered.

SpecialEffects

Use the <dvt:specialEffects> tag to specify gradient effects on many graph subcomponents. This tag must be defined as a child tag of the component tag and is not available for any text components. Note that the "seriesEffect" attribute setting always overrides the special effects settings.

Relationship with other tags

The <dvt:areaGraph> tag can have the following child tags:

<activeDataProperties>, <alertSet>, <annotationSet>, <background>, <graphFootnote>, <graphPlotArea>, <graphSubtitle>, <graphTitle>, <legendArea>, <legendText>, <legendTitle>, <markerText>, <o1Axis>, <o1MajorTick>, <o1TickLabel>, <o1Title>, <referenceObjectSet>, <seriesSet >, <shapeAttributesSet>, <timeAxisDateFormat>, <timeSelector>, <y1Axis>, <y1BaseLine>, <y1MajorTick>, <y1Title>, <y1TickLabel>, <y2Axis>, <y2BaseLine>, <y2MajorTick>, <y2TickLabel>, <y2Title>

Events

Attributes