BusinessGraphics

Use

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.

Example of the Visual Display

Notes on Accessibility

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.
Since the visualization of BusinessGraphics 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 BusinessGraphics has sufficient color contrast.
To enable the development of accessible applications the property tooltip is checked during the syntax check.

Runtime Class

CL_WD_BUSINESS_GRAPHICS

Properties in View Designer

Name	Type	Initial Value	Bindable
id	STRING	(automatic)	No
backgroundColor	STRING		No
categorySource	Context Node		Yes
chartType	WDUI_BGTYPE	columns	No
contextMenuBehaviour	WDUI_CONTEXT_MENU_BEHAVIOUR	inherit	No
contextMenuId	WDY_MD_UI_ELEMENT_REFERENCE		No
customizing	STRING		No
dimension	WDUI_BGDIMENSION	two	No
enabled	WDY_BOOLEAN	true	Yes
fontFamily	STRING		No
height	I	300	No
igsUrl	STRING		No
imageData	XSTRING		Yes
seriesSource	Context Node		Mandatory
styleClassName	STRING		Yes
tooltip	Translatable text		Yes
transparentColor	STRING	No
visible	WDUI_VISIBILITY	visible	Yes
width	I	300	No

Aggregations in the View Designer

Name	Cardinality	Type
Category	0..1	Category
Series	1..n	AbstractSeries

Events in View Designer

Name
onAction

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.

View Designer Name	Runtime Name	Type
backgroundColor	BACKGROUND_COLOR	STRING
categorySource	CATEGORY_SOURCE	OBJECT
chartType	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
contextMenuBehaviour	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
contextMenuId	CONTEXT_MENU_ID	WDY_MD_UI_ELEMENT_REFERENCE
customizing	CUSTOMIZING	STRING
dimension	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	ENABLED	WDY_BOOLEAN
fontFamily	FONT_FAMILY	STRING
height	HEIGHT	I
igsUrl	IGS_URL	STRING
imageData	IMAGE_DATA	XSTRING
seriesSource	SERIES_SOURCE	OBJECT
styleClassName	STYLE_CLASS_NAME	STRING
tooltip	TOOLTIP	WDY_MD_TRANSLATABLE_TEXT
transparentColor	TRANSPARENT_COLOR	STRING
visible	VISIBLE	WDUI_VISIBILITY
visible: none	CL_WD_BUSINESS_GRAPHICS=>E_VISIBLE-NONE
visible: visible	CL_WD_BUSINESS_GRAPHICS=>E_VISIBLE-VISIBLE
width	WIDTH	I

Dynamic Programming of Events

View Designer Name	Runtime Name
onAction	ON_ACTION

Dynamic Programming of Aggregations

View Designer Name	Runtime Name	Cardinality
Category	CATEGORY	0..1
Series	SERIES_LIST	1..n

Example

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_*.

More Information

UI Element BusinessGraphics (chartType gantt)

Editing with the Chart Designer

Chart OCX Business Graphic

For more information about accessing further methods in a BusinessGraphics element, see the system documentation for the interface IF_WD_BUSIN_GRAPHICS_MTD_HNDL.