dvt:funnelGraph funnelGraph funnel graph

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


Use the <dvt:funnelGraph> tag to create an ADF data visualization bar graph. A Funnel graph 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. A funnel renders a three-dimensional chart that represents target and actual values, and levels by color.

The Graph's layout is dominated by four major components: title, subtitle, footnote, and funnel frame. The funnel frame 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 graph plots funnel frame and its labels in 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. Funnel graphs generally require two rows of data. The first row provides actual data values, and the second row provides target values. Funnel graphs legend display threshold values.


The number of threshold, each threshold range and color can be customized in the graph bean. These functions are not exposed to the faces layer yet, but application may use a graph binding to access these functions in the graph engine.

Here is an example of customized threshold areas in a funnel graph using a graph binding.

    UIGraph graph = null;
    public UIGraph getGraph() {
        if ( graph == null )
            graph = new UIGraph();
        // Gets the graph engine object
        CommonGraph commonGraph = (CommonGraph)graph.getImageView();
        // Sets the number of thresholds to be 4
        // Gets the threshold object
        Threshold th = commonGraph.getThreshold();
        try {
            // Sets the color of the threshold
            // setColor( color , index of threshold );
            th.setColor(Color.blue, 0);
            th.setColor(Color.yellow, 1);
            th.setColor(Color.green, 2);
            th.setColor(Color.red, 3);
            // setTransparent( transparent , index of threshold );    
            th.setTransparent(false, 0);
            th.setTransparent(false, 1);
            th.setTransparent(false, 2);
            th.setTransparent(false, 3);
            // setMinValue( index of threshold , value );
            // setMaxValue( index of threshold , value );
            th.setMinValue(0, 0);
            th.setMaxValue(0, 20);
            th.setMinValue(1, 20);
            th.setMaxValue(1, 40);
            th.setMinValue(2, 40);
            th.setMaxValue(2, 50);
            th.setMinValue(3, 50);
            th.setMaxValue(3, 100);       
        // Catches the threshold of out range exception
        catch (ThresholdOutOfRangeException e){;}
        return graph;


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


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.


The legend displays threshold values. It also displays the legend title, if 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.

Funnel frame

Funnel graphs plot the data within the funnel frame. The funnelFrame integrates slice labels, o1TickLabel and a horizontal cone-shaped frame that draws slices.

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.


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

   <dvt:funnelGraph id="graph1" subType="FUNNEL">
         <dvt:shapeAttributes component="GRAPH_SLICELABEL" clickable="true" clickListener="#{clickListener.processClick}"/>

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


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.

Relationship with other tags

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

<activeDataProperties>, <background>, <graphFootnote>, <graphPlotArea>, <graphSubtitle>, <graphTitle>, <legendArea>, <legendText>, <legendTitle>, <o1TickLabel>, <shapeAttributesSet>, <sliceLabel>


Type Phases Description
oracle.adf.view.faces.bi.event.ClickEvent Apply Request Values The ClickEvent is delivered when the component is clicked.
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 areaGraph tag.
For example, /myfiles/graph.xml
Path from web application root must be provided.

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: binding="#{sampleGraph.graph}"

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 The listener interface for receiving click events on the graph components. Here is an example of clickListener implementation that displays a component name on a click action -
    public void clickListener (ClickEvent event){
        ComponentHandle handle = event.getComponentHandle();
        System.out.println(handle.getName()+" is clicked.");
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:

  • CL_NONE - Do not use any of the other custom layout attribute values
  • CL_TITLES_SIDEBYSIDE - Display Title and subtitle side by side instead of the subtitle below the title
  • CL_TITLE_SEPARATOR - Display title separator under the titles
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.
emptyText String Yes Specifies error text to display when graph has no data.
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.
groupTooltipLabelType String Yes Specifies whether group information for a graph appears in tooltips and, if so, identifies the kind of group information that appears in tooltips. Valid values are:
  • TLT_NONE - No group information appears in tooltips.
  • TLT_MEMBER - (Default) Only the dimension member for a group appears in tooltips.
  • TLT_DIM_MEMBER - Both dimension name and dimension member for a group are displayed in tooltips.
id String No the identifier for the component. The identifier must follow a subset of the syntax allowed in HTML:
  • Must not be a zero-length String.
  • First character must be an ASCII letter (A-Za-z) or an underscore ('_').
  • Subsequent characters must be an ASCII letter or digit (A-Za-z0-9), an underscore ('_'), or a dash ('-').
imageFormat String Yes

Specifies the format of graph image. Valid values are:

  • PNG - PNG image format.
  • FLASH - FLASH image format.
  • PNG_STAMPED - PNG image with no javascript. This must be used when using graph in ADF table cells via stamping.
  • AUTO - (Default) Generates Flash if a supported Flash player is found on the client. Otherwise, PNG image will be generated.
imageHeight int Yes This attribute is deprecated. Use inlineStyle attribute to specify the image width and height instead. For examples: inlineStyle = "width:500px; height:350px;".

The default height is 300 pixels.

imageWidth int Yes This attribute is deprecated. Use inlineStyle attribute to specify the image width and height instead. For examples: inlineStyle = "width:500px; height:350px;".

The default width is 400 pixels.

inlineStyle String Yes Style of the outer element(enclosing div) of the component
markerTooltipTemplate String Yes Provides a declarative way to customize the tooltips that appear on the graph. By setting the markerTooltipTemplate attribute to a tokenized string, an application can quickly format all the marker tooltips. This feature is a more performant alternative to the customTooltipCallback, since tokens can be sent to the client instead of preconstructed tooltip strings. This reduces the graph payload significantly, especially for large datasets.

The markerTooltipTemplate attribute accepts a String that may contain any number of a set of predefined tokens. When the tooltips are generated, the tokens are replaced with the information corresponding to each marker. Valid tokens are:

  • NEW_LINE - inserts a new line
  • SERIES_LABEL - the series label for the series of this marker
  • GROUP_LABEL - the group label for the group of this marker
  • X_VALUE - the X value of a scatter or bubble marker
  • Y_VALUE - the Y value of this marker (if this marker has a y value)
  • Z_VALUE - the Z value (bubble size) of a bubble marker
  • PIE_VALUE - the value of a pie slice
  • PIE_PERCENT - pie slice percentage value
  • ACTUAL_VALUE - the actual value for a funnel slice
  • TARGET_VALUE - the target value for a funnel slice
  • HIGH_VALUE - the high value for a stock marker
  • LOW_VALUE - the low value for a stock marker
  • CLOSE_VALUE - the close value for a stock marker
  • OPEN_VALUE - the open value for a stock marker
  • VOLUME_VALUE - the volume value for a stock volume marker
  • CUM_VALUE - the cumulative stacked value for a stacked graph
  • CUM_PERCENT - the cumulative percentage value for a stacked percent graph, pareto graph
markerTooltipType String Yes Specifies whether tooltips are displayed for markers and, if so, identifies the kind of information that appears in the tooltips. Valid values for marker tooltips are:
  • MTT_NONE - Displays no tooltips for markers.
  • MTT_CUM_VAL - Displays the cumulative data value (stacked graphs only).
  • MTT_PERCENT_VAL - Displays the percentage data value (pie slice only).
  • MTT_PERCENT_VAL_TEXT - Displays the percentage data value (pie slice only) and text identification such as "January, Shoes".
  • MTT_PERCENT_VAL_VALUES - Displays the percentage data value (pie slice only) and data value or values.
  • MTT_PERCENT_VAL_VALUES_TEXT - Displays the percentage data value (pie slice only), data value or values, and text identification information such as "January, Shoes".
  • MTT_TEXT - Displays text identification such as "January, Shoes".
  • MTT_VALUES - (Default) Displays data value or values.
  • MTT_VALUES_TEXT - Displays data value or values and text identification such as "January, Shoes".
Note: To display series tooltip labels for a graph, you must set markerTooltipType to a value that includes text.
partialSubmit boolean Yes Deprecated. It is not useful anymore.

Indicates whether an action can be performed through a partial page submit. Valid values are:

  • "true" - (Default) Partial page submit is allowed.
  • "false" - No partial page submit.
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.
renderImagemap boolean Yes Indicates whether an image map should be rendered for a PNG image. The default value is true.
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:

  • SE_NONE - No series effect is used for the graph. This value causes markers to appear flat and sets the graphicAntialiasing attribute to "false".
  • SE_GRADIENT - Sets a special gradient on data markers to make them look more polished and sets graphicAntialiasing to "true".
  • SE_AUTO_GRADIENT - (Default) Works similar to SE_GRADIENT except in the case of a large dataset. If the graph displays a large dataset, then the gradient is not displayed in data markers so that peformance is improved.
seriesRolloverBehavior String Yes

Specifies the behavior when the mouse rolls over one bar in a series. Valid values are:

  • RB_NONE - (Default) No series rollover behavior is enabled.
  • RB_HIGHLIGHT - Highlights all bars in the series when rollover occurs.
  • RB_DIM - Dims all bars in the series when rollover occurs
  • RB_HIGHLIGHT | RB_DIM - Produces both highlighting and dimming of all bars in the series when rollover occurs.
Note: this attribute is not supported for funnel graphs.
seriesTooltipLabelType String Yes Specifies series information in a tooltip. Valid values are as follows:
  • TLT_NONE - Displays no series information
  • TLT_MEMBER - (Default) Displays the member label of the series in a tooltip
  • TLT_DIM_MEMBER - Displays the dimension member label of a series in a tooltip
Note: The graph displays series tooltip labels only if markerTooltipType is set to a value that includes text.
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:

  • April
  • Autumn
  • Black and White
  • Comet
  • Confetti
  • Default
  • Earth
  • Executive
  • Financial
  • Glass
  • Nautical
  • Projection
  • Regatta
  • Southwest
  • Transparent

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:

  • FUNNEL - Funnel Chart
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:

  • The first member (index 0) is the column label, in the grid, of the data value. This is generally a String. If the graph has a time axis, then this should be a Java Date. Column labels typically identify groups in the graph.
  • The second member (index 1) is the row label, in the grid, of the data value. This is generally a String. Row labels appear as series labels in the graph (usually in the legend).
  • The third member (index 2) is the data value, which is usually a Double.
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:

  • NONE - Apply no visual effects
  • AUTO (Default) - Apply visual effects automatically based on graph or gauge type.