UIComponent class: oracle.adf.view.faces.bi.component.graph.UIGraph
Component type: oracle.dss.adf.graph.Graph (paretoGraph)
Use the <dvt:paretoGraph> tag to create an ADF data visualization Pareto graph. A pareto graph is one in which the data is represented by bars and a percentage line that indicates the cumulative percentage of bars. The Bars identify different sources of defects and are arranged by value, from the greatest number to the lowest number.
The <dvt:paretoGraph> tag provides a minimal set of attributes and child tags required to create this graph. 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 bar colors, for instance. Use child tag <dvt:paretoLine> to change the pareto line color.
The Graph's layout is dominated by four major components: title, subtitle, footnote, and plotArea. The plotArea plots the data and is always rendered, but the other three 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. The plotArea and its labels occupy the remaining space.
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. Pareto graphs require only a single series of data and with minimum two groups (group being a single column in this case). The Bars in the graph identify different sources of defects and are arranged by value, from the greatest number to the lowest number. The line shows the percentage of the cumulative values of the bars to the total values of all the bars in the graph. The graph automatically calculates the cumulative percentage values for the line based on the data series. This graph cannot have negative values.
The rows in the grid usually appear as the series in a bar graph. Use a set of <dvt:series> tags, within a <dvt:seriesSet> tag, to change bar 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, markerShape, etc.
Here is an example of a Pareto Graph with a <dvt:seriesSet> tag that defines default color for all series. The <dvt:series> child tag overrides this color for the first series in the graph. -
<dvt:paretoGraph id="graph1" subType="PARETO">
<dvt:seriesSet defaultColor="#336699">
<dvt:series index="0" color="#99ccff"/>
</dvt:seriesSet>
</dvt:paretoGraph>
Use the graph's "seriesEffect" attribute to add predefined gradient effects on bars.
The markerText tag defines if and where the marker text should appear in relation to bars. Use the attribute "markerTextPlace" to specify the location of the text.
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.
Pareto graphs are dual-Y graphs that plot the data within the plotArea. The plotArea integrates the axes and the data markers. The horizontal axis is an ordinal axis (o1Axis). The primary vertical axis is a data axis (y1Axis), corresponds to values that the bars represent. The secondary vertical axis is a percentage data axis (y2Axis), corresponds to values that cumulative percentage line represents. 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.
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.
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.
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.
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.
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.
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 2D marker in a pareto graph using a clickListener to display data value :
<dvt:paretoGraph >
<dvt:shapeAttributesSet>
<dvt:shapeAttributes component="GRAPH_TWODMARKER" clickable="true" clickListener="#{clickListener.processClick}"/>
</dvt:shapeAttributesSet>
</dvt:paretoGraph>
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 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, and annotations when their text is truncated. There is no option to change this behavior.
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 Pareto Graphs , for instance. The "scrollbarPresenceX1", "scrollbarPresenceY1", and "scrollbarPresenceY2" attributes control the appearance of scroll bars for the various data axes.
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.
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.
The <dvt:paretoGraph> tag can have the following child tags:
<alertSet>, <annotationSet>, <background>, <graphFootnote>, <graphPlotArea>, <graphSubtitle>, <graphTitle>, <markerText>, <o1Axis>, <o1MajorTick>, <o1TickLabel>, <o1Title>, <paretoLine>, <paretoMarker>, <referenceObjectSet>, <seriesSet >, <shapeAttributesSet>, <y1Axis>, <y1BaseLine>, <y1MajorTick>, <y1Title>, <y1TickLabel>, <y2Axis>, <y2BaseLine>, <y2MajorTick>, <y2TickLabel>, <y2Title>
Type | Phases | Description |
---|---|---|
oracle.adf.view.faces.bi.event.ClickEvent | Apply Request Values |
An event which indicates that a click action occurred in a component. A ClickEvent is enabled by adding the ClickListener to the graph. |
org.apache.myfaces.trinidad.event.AttributeChangeEvent | Invoke Application, Apply Request Values |
Event delivered to describe an attribute change. Attribute change events are not delivered for any programmatic change to a property. They are only delivered when a renderer changes a property without the application's specific request. An example of an attribute change events might include the width of a column that supported client-side resizing. |
Name | Type | Supports EL? | Description |
---|---|---|---|
advancedPropertiesXML | String | Yes |
Specifies path to an XML file that contains settings for graph properties that are not exposed in the paretoGraph tag. |
attributeChangeListener | javax.el.MethodExpression | Only EL | a method reference to an attribute change listener. Attribute change events are not delivered for any programmatic change to a property. They are only delivered when a renderer changes a property without the application's specific request. An example of an attribute change events might include the width of a column that supported client-side resizing. |
binding | String | Only EL |
Specifies a binding reference to store a specific instance of UIGraph from a backing bean. Set this attribute only to access code in a backing bean. For example, to reference a graph component in the SampleGraph class, use the following code: |
clickAction | String | Yes | Refers to a backing bean method that performs navigation processing for the graph and returns an outcome String. Or a static outcome String can be specified. The JSF NavigationHandler selects the page to display next by matching the outcome String against the navigation rules in the application configuration resource file. The application writes the Navigation rules. |
clickListener | String | Yes | |
contentDelivery | String | Yes | Specifies whether to fetch content with page load or after page load. Valid values are lazy (default) and immediate. |
customLayout | String | Yes |
Specifies custom layout information when the graph automatically places and sizes its components. Valid values are:
|
customizationId | String | Yes | This attribute is deprecated. The 'id' attribute should be used when applying persistent customizations. This attribute will be removed in the next release. |
drillingEnabled | boolean | Yes | Indicates whether drilling is enabled. |
dynamicResize | String | Yes | Specifies whether to resize the component based on its container size. Valid values are FIXED_SIZE (default) and DYNAMIC_RESIZE. |
flashDefaultFontLoading | String | Yes | Specifies whether default fonts are loaded in FLASH from the middle tier. Valid values are FLASH_DEFAULT_FONT_LOADING_ALL or FLASH_DEFAULT_FONT_LOADING_NONE. The default value is FLASH_DEFAULT_FONT_LOADING_ALL. |
id | String | No | the identifier for the component. The identifier must follow a subset of the syntax allowed in HTML:
|
imageFormat | String | Yes |
Format of graph image. Valid values are:
|
imageHeight | int | Yes | Specifies the height of the graph image in pixels. |
imageWidth | int | Yes | Specifies the width of the graph image in pixels. |
inlineStyle | String | Yes | Style of the outer element(enclosing div) of the component |
o1AxisTitle | String | Yes | Use to specify the text of the horizontal axis title. |
partialSubmit | boolean | Yes |
Indicates whether an action can be performed through a partial page submit. Valid values are:
|
partialTriggers | String | Yes | the IDs of the components that should trigger a partial update. This component will listen on the trigger components. If one of the trigger components receives an event that will cause it to update in some way, this component will request to be updated too. |
rendered | boolean | Yes | Specifies whether the component is rendered |
seriesEffect | String | Yes |
Determines the series effect that is used for a graph. Valid values are:
|
seriesRolloverBehavior | String | Yes |
Specifies the behavior when the mouse rolls over one bar in a series. Valid value are:
|
shortDesc | String | Yes | Specifies the short description of the graph. This is particularly useful in the screen reader mode. |
style | String | Yes |
Applies a style to the graph based on the specified XML file. Valid values are the name of a standard graph style or the path of a custom XML file that you want to set as a style for this graph. Predefined graph styles are:
To specify a custom style, enter the entire path to the xml file. For example: /text/myStyle.xml. |
styleClass | String | Yes | Sets a CSS style class to use for this component. Note that width and height should be set using the inlineStyle property. |
subType | String | Yes |
Specifies the type of graph. Valid values are:
|
tabularData | java.util.List | Yes |
Specifies a list of data that the graph uses to create a grid and populate itself. The List consists of a three-member Object array for each data value to be passed to the graph. The members of each array must be organized as follows:
|
threeDEffect | boolean | Yes |
Indicates whether a graph appears to have depth. Valid values are "true" and "false". Default value is "false". |
title | String | Yes | Specifies the text of the title. |
value | String | Yes | Specifies the graph's data model. This must be an instance of oracle.adf.view.faces.bi.model.DataModel or oracle.adf.view.faces.bi.model.GraphDataModel |
visualEffects | String | Yes |
Specifies the type or types of visualEffect to apply. Valid values are:
|
y1AxisTitle | String | Yes | Use to specify the text of the vertical axis title. |