<dvt:funnelGraph>

dvt:funnelGraph funnelGraph funnel graph

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

Overview

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.

Threshold

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
        commonGraph.setThresholdObjectCount(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;
    }
        
        

SeriesEffect

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

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

Number Formatting

DVT funnel graph supports number formatting on its slice labels. Users can customize the number formatting by adding <af:convertNumber> to the <dvt:sliceLabel>. The following is an example of how to configure this tag:

            <dvt:funnelGraph value="#{binding.dataModel}">
                <dvt:sliceLabel>
                     <af:convertNumber pattern="#{appPrefs.sliceLabelPattern}" />
                </dvt:sliceLabel>
             </dvt:funnelGraph>
            

Automatic Scaling and Precision

Graph automatically determines the scale ( e.g. 4K ) and precision ( e.g. show 2 decimal points - 0.25 ) based on the values that are being displayed. This automatic formatting still occurs when <af:convertNumber> is specified. The <dvt:sliceLabel> and <dvt:y1TickLabel> tags also have scaling and autoPrecision attributes that can be used to control graph's automatic number formatting. By default, scaling="auto" means graph will auto-calculate the scale. For example, 40,000 will be formatted as "40K". By default, autoPrecision="on" means that graph will auto-calculate the precision of the number. For example, 0.230546 will be displayed as "0.23". If the autoPrecision is 'on' then all of the <af:convertNumber> fraction digit settings ( e.g. min/maxFractionDigits or pattern) are ignored.

Percent and Number Formatting

Funnel graphs calculate and display percent values by default. An application has the option to have the funnel graph display percent values and / or the numbers used to calculate the percentages. To configure what is displayed in the funnel's slice label, <dvt:sliceLabel>'s textType attribute can be set and accepts the following values (LD_TEXT, LD_VALUE, LD_PERCENT, LD_TEXT_PERCENT ). Note that tooltips always display the numbers ( e.g. 42K ) and cannot display percent values like the funnel's slice.

The single <af:convertNumber> tag specified within <dvt:sliceLabel> is used to specify formatting for slice labels and tooltips, regardless of whether the slice label or tooltip is displaying percent values (e.g. 25% ) or numbers ( e.g. 42K ). When an element of the funnel graph is configured to show percents ( e.g. <dvt:sliceLabel textType="LD_PERCENT"> ), the funnel graph will force the <af:convertNumber> specified into a percent format. When <af:convertNumber> is forced to percent, graph clears <af:convertNumber> pattern, since the pattern will prevent type=percent if specified. This means that patterns are ignored when graph forces percent formatting.

Also, please note that <dvt:sliceLabel>'s autoPrecision attribute applies to both percent formats as well as numbers, while the scaling attribute only applies to numbers and is not used when formatting percents.

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.

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

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

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

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

Events

Attributes

    public void clickListener (ClickEvent event){
        ComponentHandle handle = event.getComponentHandle();
        System.out.println(handle.getName()+" is clicked.");
    }