<dvt:comboChart>

dvt:comboChart comboChart combo chart

UIComponent class: oracle.adf.view.faces.bi.component.chart.UIComboChart
Component type: oracle.dss.adf.chart.ComboChart

Overview

A chart displaying series of data whose values are represented by a combination of bars, lines, or areas.

Code Sample

<dvt:comboChart value="#{chartDataSource.defaultComboData}" var="row">
  <f:facet name="dataStamp">
    <dvt:chartDataItem series="#{row.series}" group="#{row.group}" value="#{row.value}"/>
  </f:facet>
</dvt:comboChart>

Related Tags

• dvt:chartDataItem
• dvt:chartLegend
• dvt:chartSeriesStyle
• dvt:chartValueFormat
• dvt:chartXAxis
• dvt:chartYAxis
• dvt:chartY2Axis

Browser Support and Output Formats

This component relies on HTML5 technologies available in modern browsers for animations and interactivity. When displayed in older browsers, such as IE8, a PNG image will be displayed. Animations and interactivity are not supported in these browsers.

Customization Options

Animation

Animations can be enabled on data change or on initial display by adding af:transition as a child of this component. The following trigger types and transitions are supported:

• dataChange: none (default), auto
• display: none (default), auto

Indicators can be shown during animations to identify data change using the animationIndicators attribute.

Axis Customization

The chart axes can be customized using the dvt:chartXAxis, dvt:chartYAxis, and dvt:chartY2Axis tags. Customization options include titles, axis extents, and tick increments.

Conditional Formatting

Properties of specific data items or series can be customized using EL expressions for attributes on the dvt:chartDataItem and dvt:chartSeriesStyle.

Data Labels

Data labels can be specified using the label attribute on dvt:chartDataItem. The position and style of the data labels can also be customized.

Dual Y-Axis

Dual Y-Axis charts can be used to compare data series requiring distinct axes, such as stock price and volume of shares traded. To configure a chart for dual y, used the assignedToY2 attribute on dvt:chartSeriesStyle.

Legend

The legend can be hidden, positioned, or customized using dvt:chartLegend.

Number Formatting

Number formatting options are available through dvt:chartValueFormat and dvt:chartTickLabel.

Reference Objects

Reference lines and reference areas can be added to the chart through the associated axis. For example, to add a reference line for a y-axis value, a dvt:referenceLine should be added as a child of dvt:chartYAxis.

Series Customization

Series properties can be customized using dvt:chartSeriesStyle, which is supported within the seriesStamp facet. To declaratively specify several dvt:chartSeriesStyle tags, wrap within an af:group:

<f:facet name="seriesStamp">
  <af:group>
    <dvt:chartSeriesStyle series="Series 1" color="#0000ff"/>
    <dvt:chartSeriesStyle series="Series 2" color="#ff0000"/>
  </af:group>
</f:facet>

Series Effect

The fill effect of the data objects can be customized using the seriesEffect attribute, providing support for gradient, pattern, and solid fills.

Stacked Charts

Stacked charts can be used to compare cumulative values across groups. Stacking can be enabled by using the stack attribute.

Interactivity Features

Note: As mentioned in the browser support section, the interactivity features are not supported in older browsers, such as IE8.

Data Cursor

For charts where selection and other click interactivity is not enabled, the data cursor can be used to provide feedback for the closest data item to the mouse or touch gesture. The data cursor is enabled by default on touch devices, and it can be turned on or off explicitly using the dataCursor attribute.

Hide and Show Behavior

The hideAndShowBehavior attribute allows the end user to filter the visible data set by clicking on the legend items.

Hover Behavior

The hoverBehavior attribute provides support for dimming of unrelated data objects as the user hovers on objects in the chart.

Popups and Context Menus

Popups and context menus can be displayed using af:showPopupBehavior, which is a supported child of dvt:chartDataItem.

Selection

Selection of data items can be enabled using the dataSelection attribute. Selection can be processed using selectionListener on the server or the selection event type on the client.

Zoom and Scroll

Zoom and scroll can be enabled using the zoomAndScroll attribute. For combo charts, only x-axis zoom and scroll is supported; the y-axis will be rescaled automatically based on the visible data in the viewport. The initial viewport of the chart can be set using the viewportMinimum/Maximum/StartGroup/EndGroup attributes in dvt:chartXAxis. An overview scrollbar (a.ka. a range selector), which draws the entire chart data in the scrollbar to provide context, can be enabled by using dvt:overview within the overview facet.

Screen Shot(s)

Events

Supported Facets

Attributes