<dvt:stockGraph>

dvt:stockGraph stockGraph stock graph

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

Overview

Use the <dvt:stockGraph> tag to create an ADF data visualization stock graph. Stock graphs display stock prices and, optionally, the volume of trading for one or more stocks in a graph. There are many types of regular stock or candle graphs. Here is a list of subtypes that a <dvt:stockGraph> tag supports -

• STOCK_CANDLE - Candle open-close stock graph
• STOCK_CANDLE_VOLUME - Candle open-close stock with volume
• STOCK_HILO_CLOSE - High-low-close stock graph
• STOCK_HILO_CLOSE_VOLUME - High-low-close stock graph with volume
• STOCK_OHLC_CANDLE - Candle open-high-low-close stock graph
• STOCK_OHLC_CANDLE_VOLUME - Candle open-high-low-close stock graph with volume
• STOCK_OPEN_HILO_CLOSE - Open-high-low-close stock graph
• STOCK_VOLUME - Open-high-low-close stock graph with volume

The <dvt:stockGraph> tag provides a complete set of attributes and child tags required to create any stock graph. Use the 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 stock marker colors, for instance. Use child tag <dvt:stockMarker> to change rising and falling colors of the Candle Stock graphs.

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. Various Stock graph subtypes require different numbers of columns per group. The STOCK_HILO_CLOSE and the STOCK_OHLC_CANDLE subtypes, both require four columns per group, for each stock marker in the graph displays stock's open, high, low and close value. The STOCK_HILO_CLOSE_VOLUME and the STOCK_OHLC_CANDLE_VOLUME subtypes, both additionally need a column to display the volume of trading on y2Axis. These two subtypes requires five columns per group. Similarly, the subtype STOCK_HILO_CLOSE requires three columns per group and the subtype STOCK_HILO_CLOSE_VOLUME requires four columns per group being high, low, close with volume. And the Candle graph subtypes STOCK_CANDLE and STOCK_CANDLE_VOLUME, require two and three columns per group, respectively.

Series

The rows in the grid usually appear as the series in a stock 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 stock 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.

Here is an example of a Stock 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:stockGraph id="stockGraph1" subType="STOCK_HILO_CLOSE">
                  <dvt:seriesSet defaultColor="#336699">
                    <dvt:series index="0" color="#99ccff"/>
                  </dvt:seriesSet>
                </dvt:stockGraph>
        

SeriesEffect

Use the graph's "seriesEffect" attribute to add predefined gradient effects on stock markers for Candle Stock graphs.

Series highlighting

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

MarkerText

The markerText tag defines if and where the marker text should appear in relation to stock markerss. 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

Stock 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). The primary vertical axis is data axis (y1Axis), which shows stock prices. When any stock or candle stock graph includes the volume of trading, the graph appears as a split dual-Y graph where the volume appears as bars in the lower part of the graph on the secondary y2Axis. The stock markers in the Candle stock graphs show the lesser of the open and close values at the bottom of the candle. The greater value appears at the top of the candle. If the closing value is greater than the opening value, then the candle displays rising color, which is green, by default. If the opening value is higher than the closing value, then the candle displays falling color, which is red, by default.

Number Formatting

DVT stock graph supports number formatting on its Y1 and Y2 axis tick labels as well as for marker text that appear on the stock markers. Users can customize the number formatting by adding <af:convertNumber> to the <dvt:y1TickLabel>, <dvt:y2TickLabel>, <dvt:y1Format>, and <dvt:y2Format> tags. The following is an example of how to configure these tags:

            <dvt:stockGraph value="#{binding.dataModel}">
               <dvt:markerText>
                 <dvt:y1Format>
                     <af:convertNumber pattern="#{appPrefs.markerTextPattern}" />
                 </dvt:y1Format>
                </dvt:markerText>
                <dvt:y1TickLabel>
                     <af:convertNumber pattern="#{appPrefs.tickLabelPattern}" />
                </dvt:y1TickLabel>
             </dvt:stockGraph>
            

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 graph tags that support <af:convertNumber> child tags ( e.g. <dvt:y1TickLabel>, <dvt:y1Format>, ...) 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.

Categorical attributes formatting

Graph typically uses categorical attributes ( e.g. product, geography, year, etc. ) on an ordinal axis and for the marker tooltips. To specify how categorical attributes should be formatted, an application needs to specify <dvt:attributeFormat> tag for each categorical attribute to be formatted. The <dvt:attributeFormat> tag needs to identify the categorical attribute that is being formatted by name as well as specify a converter to use when formatting the attribute. For example,

            <dvt:stockGraph value="#{bindings.StockView1.graphModel}" subType="STOCK_HILO_CLOSE">
                      <dvt:attributeFormat id="af1" name="MarketDate">
                          <af:convertDateTime pattern = "yyyy-MM-dd hh:mm:ss a"  timeZone="US/Pacific"/>
                      </dvt:attributeFormat>
             </dvt:stockGraph>
            

The name of the categorical attribute is the name of the attribute/layer that was added to the Graph DataModel. The Graph model can be set declaratively by updating the pagedef. Here is the associated view pagedef for the above graph:

            <graph IterBinding="StockView1Iterator" id="StockView1"
                   xmlns="http://xmlns.oracle.com/adfm/dvt" type="STOCK_HILO_CLOSE">
              <graphDataMap convert="false" leafOnly="true">
                <series>
                  <item value="Symbol"/>
                </series>
                <groups>
                  <item value="MarketDate"/>
                  <data>
                    <item value="High"/>
                    <item value="Low"/>
                    <item value="Close"/>
                  </data>
                </groups>
              </graphDataMap>
            </graph>
            

Configuring Date Formatting

If there is a single categorical Date attribute being displayed on the O1Axis, then Graph displays a TimeAxis instead of the typical O1 / Ordinal Axis. The TimeAxis will show dates in a hierarchical format as opposed to as a single label on an O1 Axis ( e.g. June 27, 2001 ). To show a single label on the O1 Axis, the TimeAxis should be turned off ( e.g. timeAxisType="TAT_OFF" ) and a <dvt:attributeFormat> should be used to specify the date format.

Time Axis

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

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 a stock marker in a Stock graph using a clickListener to display data value :

            <dvt:stockGraph >
                 <dvt:shapeAttributesSet>
                  <dvt:shapeAttributes component="component="GRAPH_STOCKMARKER"" clickable="true" clickListener="#{clickListener.processClick}"/>
                 </dvt:shapeAttributesSet>
                </dvt:stockGraph>
        

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.

Popups

The af:showPopupBehavior tag can be used within the <dvt:seriesSet> to display popups for data objects within the graph. Only the "click" and "mouseHover" trigger types are supported. When using hover popups, it is recommended that tooltips be disabled, since having multiple types of hover feedback can be confusing to the user.

Context Menus

Context menus can be defined by using any of the context menu facets that are defined on the graph. The "bodyContextMenu" facet specifies a context menu that is displayed on any non-selectable object within the component. The "contextMenu" facet specifies a context menu that is displayed on any selectable object within the graph. The "multiSelectContextMenu" facet specifies a context menu that is displayed when multiple objects are selected. Each facet supports only a single child component. Selection must be enabled and supported for the specific graph type in order for an object to be considered selectable. Context Menus are currently only supported in Flash.

Due to technical limitations when using the Flash rendering format, the context menu contents are currently displayed using the Flash Player's context menu. This imposes several limitations defined by the Flash Player:

• Flash does not allow for submenus in its context menu.
• Flash only allows a maximum of 15 custom menu items. The component's built in menu items, such as the ones for interactiveSliceBehavior, also count towards this limit.
• Flash only allows for text-only menu items. Icons or other controls possible in ADF Faces menus are not possible in Flash.
• Each caption must contain at least one visible character.
• Control characters, newlines, and other white space characters are ignored.
• No caption can be more than 100 characters long.
• Captions that are identical to another custom item are ignored, whether the matching item is visible or not. Menu captions are compared to built-in captions or existing custom captions without regard to case, punctuation, or white space.
• The following captions are not allowed, but the words may be used in conjunction with other words to form a custom caption: "Save","Zoom In", "Zoom Out", "100%", "Show All", "Quality", "Play", "Loop", "Rewind", "Forward", "Back", "Movie not loaded", "About", "Print", "Show Redraw Regions", "Debugger", "Undo", "Cut", "Copy", "Paste", "Delete", "Select All", "Open", "Open in new window", "Copy link"
• None of the following words can appear in a custom caption on their own or in conjunction with other words: "Adobe", "Macromedia", "Flash Player", "Settings"

Additionally, since Flash's request for context menu items is a synchronous call, so a server request to evaluate EL is not possible when the context menu is invoked. To provide context menus that vary by selected object, the menus will be pre-fetched if the context menu popup uses contentDelivery="lazyUncached". For context menus that may vary by state, this means that any EL expressions within the menu definition will be called repeatedly at render time, with different selection and currency states. When using these context menus that are pre-fetched, the application must be aware of the following:

• Long running or slow code should not be executed in any EL that may be used to determine how the context menu is displayed. This does not apply to af:commandMenuItem attributes that are called after a menu item is selected, such as "actionListener".
• In the future, if the Flash limitations are solved, the ADF context menu may be displayed in place of the Flash context menu. To ensure upgrade compatibility, applications developers should code such that their EL will function both in cases where the menu is pre-fetched, and also if the EL is evaluated when the menu is invoked. It is highly recommended that the only component state that applications rely on are selection and currency.

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

Zoom and scroll attributes are not supported for the stock graph.

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

af:dropTarget, <alertSet>, <annotationSet>, <attributeFormat>, <background>, <graphFootnote>, <graphPlotArea>, <graphSubtitle>, <graphTitle>, <legendArea>, <legendText>, <legendTitle>, <markerText>, <o1Axis>, <o1MajorTick>, <o1TickLabel>, <o1Title>, <referenceObjectSet>, <seriesSet >, <shapeAttributesSet>, <stockMarker>, <timeAxisDateFormat>, <timeSelector>, <y1Axis>, <y1BaseLine>, <y1MajorTick>, <y1Title>, <y1TickLabel>

Geometry Management

• This component can be stretched by a parent layout component that stretches its children, e.g. panelStretchLayout, panelSplitter, if dynamicResize="DYNAMIC_SIZE" is set.
• This component does stretch to fill up the browser's viewport when it is the "sole visual root component" in the component tree, if dynamicResize="DYNAMIC_SIZE" is set.
• When NOT stretched, this component will be displayed in its default dimensions which are provided by the skin. This can be modified by applying a dimension using the inlineStyle or styleClass attributes.
• This component does not stretch its children.

Attachment Mode

In attachment mode, the graph will be displayed in HTML5 or PNG, depending on the browser being used. Limited client interactivity, such as tooltips, is available. The following features are not supported in attachment mode:

• clickListener
• drilling
• dynamicResize
• hideAndShowBehavior="withRescale"
• selectionListener
• timeSelector
• zoom functionality

Screen Shot(s)

Events

Supported Facets

Attributes

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

    public void scrollListener (ScrollEvent event){
        double zoomMin = event.getAxisMin(ScrollEvent.Y1AXIS);
        double zoomMax = event.getAxisMax(ScrollEvent.Y1AXIS);
        int groupStart = event.getAxisStartGroup(ScrollEvent.O1AXIS);
        int groupCount = event.getAxisGroupCount(ScrollEvent.O1AXIS); 
        System.out.println("Y1 Axis has a range from "+Double.toString(zoomMin)+" to "+Double.toString(zoomMax));
        System.out.println("O1 Axis has starting group index of "+Integer.toString(groupStart)+", and a group count of "+Integer.toString(groupCount));
    }
        

    public void zoomListener (ZoomEvent event){
        double zoomMin = event.getAxisMin(ZoomEvent.Y1AXIS);
        double zoomMax = event.getAxisMax(ZoomEvent.Y1AXIS);
        int groupStart = event.getAxisStartGroup(ZoomEvent.O1AXIS);
        int groupCount = event.getAxisGroupCount(ZoomEvent.O1AXIS); 
        System.out.println("Y1 Axis has a range from "+Double.toString(zoomMin)+" to "+Double.toString(zoomMax));
        System.out.println("O1 Axis has starting group index of "+Integer.toString(groupStart)+", and a group count of "+Integer.toString(groupCount));
    }