Chart

Use

With the Chart UI element you can embed different chart types of CVOM (Common Visualization Object Modeler) chart library into your Web Dynpro ABAP application. This JavaScript-based library uses open web standards (e.g. HTML5, CSS3, and SVG) and provides a range of chart types (e.g. line, bar, or pie charts), which you can use to display data and its relationships graphically. With property type you can specify the chart type the data is to be displayed in.

Example of the Visual Display

Notes on Use

  • Always run Web Dynpro applications with embedded Charts in the standard mode of the browser. To do this, set application parameter bWDPREFERREDRENDERING to value STANDARDS.

    For more information, see Application Parameters and URL Parameters, and SAP Note .1753544 Information published on SAP site.

  • 3D charts are not supported by all browsers.
  • To use the Chart UI element the following SICF service must be active:

    /sap/public/bc/ui5_ui5

    For more information, see Active Services in SICF.

  • Since the visualization of Chart is not adjusted if you set the High Contrast Black theme, you have to ensure the chart complies with accessibility standards. If you want to create an accessible application, make sure that the embedded Chart has sufficient color contrast.

  • There is no support for "right-to-left". The UI is not mirrored, which means the same format is displayed for right-to-left and left-to-right. The mix of right-to-left and left-to-right scripts in texts for axles, legends, etc. leads to problems.

Implementation Details

Runtime Class

CL_WD_CHART

Properties in View Designer

Name

Type

Initial Value

Bindable

id

STRING

(automatic)

No

contextMenuBehaviour

WDUI_CONTEXT_MENU_BEHAVIOUR

inherit

No

contextMenuId

WDY_MD_UI_ELEMENT_REFERENCE

No
datafeedingstring STRING   Yes

datastring

STRING

Yes

enabled

WDY_BOOLEAN

true

Yes

height

STRING

Yes

optionsstring

STRING

Yes
selectionstring STRING   Yes
styleClassName STRING   Yes

tooltip

Translatable text

Yes

type

STRING

viz/line

Yes

visible

WDUI_VISIBILITY

visible

Yes

width

STRING

Yes

Events in View Designer

Name
onSelect

Other properties that can be inherited are defined in the related higher-level classes. The related UI elements are:

Dynamic Programming

For dynamic programming, the same properties, events, and aggregations as in the View Designer are available. But note that the spelling format and use of upper/lower case is different.

Dynamic Programming of Properties

View Designer Name Runtime Name  

contextMenuBehaviour

CONTEXT_MENU_BEHAVIOUR

WDUI_CONTEXT_MENU_BEHAVIOUR

 contextMenuBehaviour: inherit

CL_WD_C_TABLE=>E_CONTEXT_MENU_BEHAVIOUR-INHERIT

 contextMenuBehaviour: provide

CL_WD_C_TABLE=>E_CONTEXT_MENU_BEHAVIOUR-PROVIDE

 contextMenuBehaviour: suppress

CL_WD_C_TABLE=>E_CONTEXT_MENU_BEHAVIOUR-SUPPRESS

contextMenuId

CONTEXT_MENU_ID

WDY_MD_UI_ELEMENT_REFERENCE
datafeedingstring DATAFEEDINGSTRING STRING

datastring

DATASTRING

STRING

enabled

ENABLED

WDY_BOOLEAN

height

HEIGHT

STRING

optionsstring

OPTIONSSTRING

STRING

selectionstring

 SELECTIONSTRING STRING
styleClassName STYLE_CLASS_NAME STRING

tooltip

TOOLTIP

WDY_MD_TRANSLATABLE_TEXT

type

TYPE

STRING

visible

VISIBLE

WDUI_VISIBILITY

visible: none

CL_WD_C_TABLE=>E_VISIBLE-NONE

visible: visible

CL_WD_C_TABLE=>E_VISIBLE-VISIBLE

width

WIDTH

STRING

Dynamic Programming of Events

View Designer Name

Runtime Name

onSelect

ON_SELECT

&EXAMPLE&

You can find an example in the system in component .WDR_TEST_CHART.