Demo: Bar Chart using Business Graphics in Web Dynpro ABAP

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

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