BusinessGraphics 
The BusinessGraphics UI element provides a range of chart types, such as bar charts and pie charts, which you can use to display data and the relationships between data graphically. More complex chart types such as "portfolio" or "gantt" charts are also available. The users of your Web application can use these to help with strategic planning decisions or, more generally, as an information chart.
You can use the Chart Designer to modify the UI element properties and other properties (chart elements) of a business graphic, and adapt them to your requirements.
Note
When using a business graphic, make sure that you use this UI element together with a label UI element, to ensure you meet the accessibility requirements of the application.
To enable the development of accessible applications, the tooltip property is checked during the syntax check.
Example of the Visualization

Runtime Class |
CL_WD_BUSINESS_GRAPHICS |
Properties in View Designer
Name |
Type |
Initial Value |
Bindable |
|---|---|---|---|
STRING |
(automatic) |
No |
|
STRING |
No |
||
Context node |
Yes |
||
WDUI_BGTYPE |
columns |
No |
|
WDUI_CONTEXT_MENU_BEHAVIOUR |
inherit |
No |
|
WDY_MD_UI_ELEMENT_REFERENCE |
No |
||
STRING |
No |
||
WDUI_BGDIMENSION |
two |
No |
|
WDY_BOOLEAN |
true |
Yes |
|
STRING |
No |
||
I |
300 |
No |
|
STRING |
No |
||
XSTRING |
Yes |
||
Context node |
Mandatory |
||
Translatable text |
Yes |
||
STRING |
No |
||
WDUI_VISIBILITY |
visible |
Yes |
|
I |
300 |
No |
Aggregations in View Designer
Name |
Cardinality |
Type |
|---|---|---|
0..1 |
||
1..n |
Events in View Designer
Name |
|---|
Note
Other properties that can be inherited are defined in the related higher-level classes. The related UI elements are:
For dynamic programming, the same properties, events and aggregations are available as in the View Designer. Note the different spellings.
View Designer Name |
Runtime Name |
Type |
|---|---|---|
BACKGROUND_COLOR |
STRING |
|
CATEGORY_SOURCE |
OBJECT |
|
CHART_TYPE |
WDUI_BGTYPE |
|
chartType: area |
CL_WD_BUSINESS_GRAPHICS=>E_CHART_TYPE-AREA |
|
chartType: bars |
CL_WD_BUSINESS_GRAPHICS=>E_CHART_TYPE-BARS |
|
chartType: columns |
CL_WD_BUSINESS_GRAPHICS=>E_CHART_TYPE-COLUMNS |
|
chartType: delta_chart |
CL_WD_BUSINESS_GRAPHICS=>E_CHART_TYPE-DELTA_CHART |
|
chartType: doughnut |
CL_WD_BUSINESS_GRAPHICS=>E_CHART_TYPE-DOUGHNUT |
|
chartType: gantt |
CL_WD_BUSINESS_GRAPHICS=>E_CHART_TYPE-GANTT |
|
chartType: histogram |
CL_WD_BUSINESS_GRAPHICS=>E_CHART_TYPE-HISTOGRAM |
|
chartType: lines |
CL_WD_BUSINESS_GRAPHICS=>E_CHART_TYPE-LINES |
|
chartType: mta |
CL_WD_BUSINESS_GRAPHICS=>E_CHART_TYPE-MTA |
|
chartType: pie |
CL_WD_BUSINESS_GRAPHICS=>E_CHART_TYPE-PIE |
|
chartType: pipeline |
CL_WD_BUSINESS_GRAPHICS=>E_CHART_TYPE-PIPELINE |
|
chartType: polar |
CL_WD_BUSINESS_GRAPHICS=>E_CHART_TYPE-POLAR |
|
chartType: portfolio |
CL_WD_BUSINESS_GRAPHICS=>E_CHART_TYPE-PORTFOLIO |
|
chartType: profiles |
CL_WD_BUSINESS_GRAPHICS=>E_CHART_TYPE-PROFILES |
|
chartType: profile_area |
CL_WD_BUSINESS_GRAPHICS=>E_CHART_TYPE-PROFILE_AREA |
|
chartType: radar |
CL_WD_BUSINESS_GRAPHICS=>E_CHART_TYPE-RADAR |
|
chartType: scatter |
CL_WD_BUSINESS_GRAPHICS=>E_CHART_TYPE-SCATTER |
|
chartType: smart_map |
CL_WD_BUSINESS_GRAPHICS=>E_CHART_TYPE-SMART_MAP |
|
chartType: speedometer |
CL_WD_BUSINESS_GRAPHICS=>E_CHART_TYPE-SPEEDOMETER |
|
chartType: split_pie |
CL_WD_BUSINESS_GRAPHICS=>E_CHART_TYPE-SPLIT_PIE |
|
chartType: stacked_area |
CL_WD_BUSINESS_GRAPHICS=>E_CHART_TYPE-STACKED_AREA |
|
chartType: stacked_bars |
CL_WD_BUSINESS_GRAPHICS=>E_CHART_TYPE-STACKED_BARS |
|
chartType: stacked_columns |
CL_WD_BUSINESS_GRAPHICS=>E_CHART_TYPE-STACKED_COLUMNS |
|
chartType: stacked_lines |
CL_WD_BUSINESS_GRAPHICS=>E_CHART_TYPE-STACKED_LINES |
|
chartType: stacked_profiles |
CL_WD_BUSINESS_GRAPHICS=>E_CHART_TYPE-STACKED_PROFILES |
|
chartType: stacked_profile_area |
CL_WD_BUSINESS_GRAPHICS=>E_CHART_TYPE-STACKED_PROFILE_AREA |
|
chartType: stacked_radar |
CL_WD_BUSINESS_GRAPHICS=>E_CHART_TYPE-STACKED_RADAR |
|
chartType: stacked_time_bars |
CL_WD_BUSINESS_GRAPHICS=>E_CHART_TYPE-STACKED_TIME_BARS |
|
chartType: stacked_time_columns |
CL_WD_BUSINESS_GRAPHICS=>E_CHART_TYPE-STACKED_TIME_COLUMNS |
|
chartType: time_bars |
CL_WD_BUSINESS_GRAPHICS=>E_CHART_TYPE-TIME_BARS |
|
chartType: time_columns |
CL_WD_BUSINESS_GRAPHICS=>E_CHART_TYPE-TIME_COLUMNS |
|
chartType: time_scatter |
CL_WD_BUSINESS_GRAPHICS=>E_CHART_TYPE-TIME_SCATTER |
|
CONTEXT_MENU_BEHAVIOUR |
WDUI_CONTEXT_MENU_BEHAVIOUR |
|
contextMenuBehaviour: inherit |
CL_WD_BUSINESS_GRAPHICS=>E_CONTEXT_MENU_BEHAVIOUR-INHERIT |
|
contextMenuBehaviour: provide |
CL_WD_BUSINESS_GRAPHICS=>E_CONTEXT_MENU_BEHAVIOUR-PROVIDE |
|
contextMenuBehaviour: suppress |
CL_WD_BUSINESS_GRAPHICS=>E_CONTEXT_MENU_BEHAVIOUR-SUPPRESS |
|
CONTEXT_MENU_ID |
WDY_MD_UI_ELEMENT_REFERENCE |
|
CUSTOMIZING |
STRING |
|
DIMENSION |
WDUI_BGDIMENSION |
|
dimension: pseudo_three |
CL_WD_BUSINESS_GRAPHICS=>E_DIMENSION-PSEUDO_THREE |
|
dimension: three |
CL_WD_BUSINESS_GRAPHICS=>E_DIMENSION-THREE |
|
dimension: two |
CL_WD_BUSINESS_GRAPHICS=>E_DIMENSION-TWO |
|
ENABLED |
WDY_BOOLEAN |
|
FONT_FAMILY |
STRING |
|
HEIGHT |
I |
|
IGS_URL |
STRING |
|
IMAGE_DATA |
XSTRING |
|
SERIES_SOURCE |
OBJECT |
|
TOOLTIP |
WDY_MD_TRANSLATABLE_TEXT |
|
TRANSPARENT_COLOR |
STRING |
|
VISIBLE |
WDUI_VISIBILITY |
|
visible: none |
CL_WD_BUSINESS_GRAPHICS=>E_VISIBLE-NONE |
|
visible: visible |
CL_WD_BUSINESS_GRAPHICS=>E_VISIBLE-VISIBLE |
|
WIDTH |
I |
|
Dynamic Programming of Events
View Designer Name |
Runtime Name |
|---|---|
ON_ACTION |
Dynamic Programming of Aggregations
You can find examples of this interface element in the system in the Web Dynpro application WDR_TEST_UI_ELEMENTS, and in the component WDR_TEST_EVENTS in the views BG_*.
UI Element BusinessGraphics (chartType gantt)
Editing with the Chart Designer
For more information about accessing further methods in a BusinessGraphics element, see the system documentation for the interface IF_WD_BUSIN_GRAPHICS_MTD_HNDL.