Purpose:
Demonstration of Bar chart using business graphics in Web dynpro ABAP
Scenario:
I would like to explain how to use Bar chart using Business Graphics in Web dynpro ABAP & also, customizing the settings of chart.
Pre-requisite:
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.
Step1:
Go to t-code SE80 and create WD component as below
Step 2:
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
Step3:
Create an ui element BAR_CHART of type BUSINESS GRAPHICS and bind the property “Series Source” to context node CHART as below
Step 3:
Right click on ui element BAR_CHART and choose option Insert category and bind the properties as below
Step 4:
Right click on ui element BAR_CHART and choose option Insert series and bind the properties as below
Step 5:
Click on ui element POINT and bind the properties as below
Step 6:
Right click on ui element POINT and choose the option “Insert value” as below
Step 7:
Bind the properties of VALUE as below
Now, write the below code in WDDOINIT( ) method of view to populate some sample data
WDDOINIT |
---|
METHOD wddoinit . DATA lt_chart TYPE wd_this->elements_chart. * navigate from <CONTEXT> to <CHART> via lead selection CLEAR ls_chart. 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.
Step 8:
Create an application and save it in package as below
Now, Test the application for result.
Output:
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
Customizing Step1
Rigtht click on ui element BAR_CHART and choose option “Edit Customizing” as below
Customizing Step2:
Go to series option and choose Default series. Then click on “Show Label” check box as below
Customizing Step3:
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
nice document
nice document really help full for those who want to learn buisness graphics , explained very clearly
Regards
Govardan
Nice document! I solved the problem of duplicate columns in bar chart. In the SERIES element, change the property “dataLength” to 1.
Hi
I run the webdynpro DEMO_BG_GANTT but i think i could not get the proper output..
Thanks
Nishant
Hi,
I created the NODE in the VIEW level but i got the duplicate entries.
LS_GRAPHDATA–PROCESS_VIEW = ‘itemG’.
LS_GRAPHDATA–ITEMB = ‘20160101’.
LS_GRAPHDATA–ITEMC = ‘20160229’.
APPEND LS_GRAPHDATA TO LT_GRAPHDATA.
LO_ND_GRAPHDATA->BIND_TABLE( NEW_ITEMS = LT_GRAPHDATA SET_INITIAL_ELEMENTS = ABAP_false ).
LS_GRAPHDATA–PROCESS_VIEW = ‘itemC’.
LS_GRAPHDATA–ITEMB = ‘20160301’.
LS_GRAPHDATA–ITEMC = ‘20160801’.
APPEND LS_GRAPHDATA TO LT_GRAPHDATA.
LO_ND_GRAPHDATA->BIND_TABLE( NEW_ITEMS = LT_GRAPHDATA SET_INITIAL_ELEMENTS = ABAP_false ).
LS_GRAPHDATA–PROCESS_VIEW = ‘itemC’.
LS_GRAPHDATA–ITEMB = ‘20160501’.
LS_GRAPHDATA–ITEMC = ‘20160901’.
APPEND LS_GRAPHDATA TO LT_GRAPHDATA.
CAT 0 and CAT3 cat4 are duplicate, I passed only 3 values. Please check