Chart Component

A generic design template for displaying data in an interactive chart format.

Definition

The Chart component is implemented using the Web Dynpro component FPM_CHART_UIBB.

The information displayed in this component at runtime is determined by the feeder class assigned to the configuration of the Web Dynpro component FPM_CHART_UIBB. However, the concrete display of the data in this component is determined at configuration of this component in the FPM configuration editor, FLUID.

Note

The FPM Chart UIBB renders charts on the basis of the Web Dynpro ABAP Chart UI element. This element is exposed by ABAP class CL_WD_CHART. It can render graphics on the basis of the CVOM (Common Visual Object Model) HTML5 Visualization library. Therefore, for this component to be visible in your applications at runtime, your browser must support HTML5. For more information, see UI Control Rendering in Standards Mode, and the documentation for Chart under User Interface Elements in the Reference section of the Web Dynpro ABAP documentation in the SAP NetWeaver library. Search also for in the

Use

The Chart component offers a large selection of different and highly-configurable graphs, providing you with visual representations of your business data. Charting features such as resizing, morphing, and transition effects are available with this component. The Chart component also provides you with an out-of-the-box drill-down feature for interactive analysis.

Personalization of this component at runtime is also possible.

Structure at Runtime

The structure of this component at runtime varies according to chart type. However, the following objects are usually present in all chart types:

Chart
Chart Title
Legend
Chart Toolbar

The following figure illustrates some of the available chart types:

Figure 1: Example Chart Types

Editing the Structure at Design Time (FLUID)

You configure this component using the FPM configuration editor, FLUID. At design time, the Preview panel in FLUID displays the Chart component in WYSIWYG-like style. You can change the chart type, and enable personalization using the relevant fields in the General Settings panel. Settings grouped into Basic Settings, Plot Area, X-Axis, and Y-Axis are also displayed in this panel; the settings displayed for each are dependent on the chart type.

You add extra fields to this component using one of the following methods:

Drag and drop a field from the Repositories panel onto the Preview panel
Choose the Add Element button in the Chart UIBB Schema panel

For more information on the attributes of this component in FLUID, choose Field Help from the context menu in the system.

Note In the General Settings panel, under the Fixed Size section, the Height field is set as a default to 100% to ensure that a Chart component automatically fills up all available space at runtime. However, if the available space is too small, the Chart component is rendered with a height of 0%, and is no longer visible to the user.

Note To enable the default Height setting of 100% to function correctly, the Chart UIBB attribute Container Stretching must be set to UIBB Needs Surrounding Containers to be Stretched. Additionally, in the General Settings panel, under the Additional Settings section, the Scroll Mode field must be set to No Scrollbars. These settings are made automatically by FPM when you add a Chart UIBB to a floorplan, Tabbed component, or Composite component configuration. If you change the height of the Chart component to a fixed height, you must remove these settings.

Chart UIBB - Dimensions and Measures

The data and data model behind a chart are defined in the feeder class. On configuration level (dynamic or static) Dimensions and Measures are then defined on the basis of the given data model:

Dimension
A range of data. For example, City, Country, Month, Year, and Currency Code could all be considered as Dimensions.
Measure
Data that can be quantified by numbers only.

A Measure can be always used as a Dimension, but a Dimension cannot always be converted into a Measure.

The drill-down feature at runtime is achieved by setting the Data Type of the individual Elements of the chart to Dimension for Drilldown.