<dvt:pieGraph>

dvt:pieGraph pieGraph pie graph

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

Overview

Use the <dvt:pieGraph> tag to create an ADF data visualization pie graph. In a Pie Graph one group of data is represented as sections of a circle, making the circle look like a sliced pie. There are many types of pie graphs. Here is a list of subtypes that a <dvt:pieGraph> tag supports -

• PIE - Pie graph
• PIE_BAR - Pie-Bar graph
• PIE_MULTI - Multiple pie graph
• RING - Ring graph
• RING_BAR - Ring-Bar graph
• RING_MULTI - Multiple ring graph

The <dvt:pieGraph> tag provides a complete set of attributes and child tags required to create any pie graph. Use the Pie 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 slice colors, for instance.

The Graph's layout is dominated by five major components: title, subtitle, footnote, legendArea, and pieFrame. The pieFrame 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 pieFrame 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. A Pie or a Ring graph displays one group of data, each slice representing a different series. This graph type requires one column in the grid, with multiple rows, one for each slice. Multiple Pie or multiple Ring graphs show one pie for each group, or column, of data. Pie graphs can be drawn with just one data point, though such graphs may not be useful. In case of Pie Bar or Ring Bar graphs, each slice represents a series total. The data for one such slice is represented in further detail by a percentage stacked bars.

Series

The rows in the grid usually appear as the series in a graph. The graph legend identifies each series in the graph, with a labeled symbol that shows color and other appropriate attributes. Use a set of <dvt:series> tags, within a <dvt:seriesSet> tag, to change slice 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, pieSliceExplode (separate a slice away from the rest of a Pie graph), etc.

Here is an example of a Pie graph with a <dvt:seriesSet> tag that defines default border color for all slices. The <dvt:series> child tag with pieSliceExplode attribute is used to separate first slice away from the rest of the Pie. -

                <dvt:pieGraph id="pieGraph1" subType="PIE">
                  <dvt:seriesSet defaultBorderColor="#336699"">
                    <dvt:series index="0" pieSliceExplode="50">
                  </dvt:seriesSet>
                </dvt:pieGraph>
        

SeriesEffect

Use the graph's "seriesEffect" attribute to add predefined gradient effects on slices of the Pie.

Series highlighting

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

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. 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.

PieFrame

Pie graphs plot the data within the pieFrame. The pieFrame integrates the slice labels, the slices, and the pie label. The PieFrame is divided into multiple sections when displaying Multiple Pie or Multiple ring graph. The number sections in the frame equal to the number groups in the data. In case of Pie Bar or Ring Bar graphs the pie frame also displays bars with vertical data axis (y1Axis). The y1Axis is associated with y1TickLabel and y1Title

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.

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 a slice in a pie graph using a clickListener to display data value :

                <dvt:pieGraph >
                 <dvt:shapeAttributesSet>
                  <dvt:shapeAttributes component="GRAPH_SLICE" clickable="true" clickListener="#{clickListener.processClick}"/>
                 </dvt:shapeAttributesSet>
                </dvt:barGraph>
        

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

        public void processClick(ClickEvent event) {   
                ComponentHandle handle = event.getComponentHandle();
                if (handle instanceof DataComponentHandle) {
                        DataComponentHandle dhandle = (DataComponentHandle)handle;
                        System.out.println("Data value: " + dhandle.getValue(DataComponentHandle.UNFORMATTED_VALUE).toString());
                }
        }
        

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 labels. Use attributes "markerTooltipType", "seriesTooltipLabelType", and "groupTooltipLabelType" to customize tooltip content. The graph automatically displays tooltips for components like title, subtitle, footnote, and legendText, when their text is truncated. There is no option to change this behavior.

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:pieGraph> tag can have the following child tags:

<activeDataProperties>, <background>, <graphFootnote>, <graphPieFrame>, <graphSubtitle>, <graphTitle>, <legendArea>, <legendText>, <legendTitle>, <seriesSet >, <shapeAttributesSet>, <slice>, <sliceLabel>, <pieFeeler>, <pieLabel>

Events

Attributes