Demonstration of Bar chart using business graphics in Web dynpro ABAP
I would like to explain how to use Bar chart using Business Graphics in Web dynpro ABAP & also, customizing the settings of chart.
Basic knowledge of Webdynpro ABAP,& OO ABAP
Key – Factor:
If we create a node in component controller and then map to view context, we will get duplicate columns in bar chart ( This is strange )
So, we create context node directly in View context
Step by step Process
Let us create a simple WD component with a view and have business graphics ui elements used in it.
Go to t-code SE80 and create WD component as below
Go to view context and create a node CHART with attribute MONTH & COUNT as below
Note: this is very important, do not map the context from component controller, instead create it directly
Create an ui element BAR_CHART of type BUSINESS GRAPHICS and bind the property “Series Source” to context node CHART as below
Right click on ui element BAR_CHART and choose option Insert category and bind the properties as below
Right click on ui element BAR_CHART and choose option Insert series and bind the properties as below
Click on ui element POINT and bind the properties as below
Right click on ui element POINT and choose the option “Insert value” as below
Bind the properties of VALUE as below
Now, write the below code in WDDOINIT( ) method of view to populate some sample data
METHOD wddoinit .
DATA lt_chart TYPE wd_this->elements_chart.
* navigate from <CONTEXT> to <CHART> via lead selection
ls_chart-month = ‘Feb’.
ls_chart-month = ‘March’.
ls_chart-month = ‘April’.
lo_nd_chart->bind_table( new_items = lt_chart set_initial_elements =
Save component and activate it.
Create an application and save it in package as below
Now, Test the application for result.
Here is the out of BAR chart
You can note that we are not displaying any values on BARS, to have more information on this chart like, values, x axis title, y axis title, etc.
Requirement: we need to have values displayed on top of each bar
We need to go for customing the business graphics ui element as below
Rigtht click on ui element BAR_CHART and choose option “Edit Customizing” as below
Go to series option and choose Default series. Then click on “Show Label” check box as below
Go to “Text Properties” ans set the vertical postion to “Top”, as below
Now, let us run our application to see our changes as below
Similarly, we can customize the chart based on our requirement .
Hope this document is helpful for those looking for a sample tutorial on BAR Charts
Your comments / feed back is always welcome