Skip to Content
Actions

Demo: Bar Chart using Business Graphics in Web Dynpro ABAP

January 16, 2014 | 1,417 Views |
 abap web dynproabap webdynproweb dynpro abapwebdynpro abap
Follow

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

1.PNG

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

2.PNG

Step3:

Create an ui element BAR_CHART of type BUSINESS GRAPHICS and bind the property “Series Source” to context node CHART as below

4.PNG

Step 3:

Right click on ui element BAR_CHART and choose option Insert category and bind the properties as below

5.PNG

Step 4:

Right click on ui element BAR_CHART and choose option Insert series and bind the properties as below

6.PNG

Step 5:

Click on ui element POINT and bind the properties as below

7.PNG

Step 6:

Right click on ui element POINT and choose the option “Insert value” as below

/wp-content/uploads/2014/01/8_364582.png

Step 7:

Bind the properties of VALUE as below

9.PNG

Now, write the below code in WDDOINIT( ) method of view to populate some sample data

WDDOINIT

METHOD wddoinit .
  DATA lo_nd_chart TYPE REF TO if_wd_context_node.

  DATA lt_chart TYPE wd_this->elements_chart.
  DATA ls_chart LIKE LINE OF lt_chart.

* navigate from <CONTEXT> to <CHART> via lead selection
  lo_nd_chart = wd_context->get_child_node( name =
wd_this->wdctx_chart ).

  CLEAR ls_chart.
  ls_chart-month = ‘Jan’.
  ls_chart-count = 120.
  APPEND ls_chart TO lt_chart.
  CLEAR ls_chart.

  ls_chart-month = ‘Feb’.
  ls_chart-count = 560.
  APPEND ls_chart TO lt_chart.

    ls_chart-month = ‘March’.
  ls_chart-count = 360.
  APPEND ls_chart TO lt_chart.

    ls_chart-month = ‘April’.
  ls_chart-count = 760.
  APPEND ls_chart TO lt_chart.

  lo_nd_chart->bind_table( new_items = lt_chart set_initial_elements =
abap_true ).
ENDMETHOD.

Save component and activate it.

Step 8:

Create an application and save it in package as below

11.PNG

Now, Test the application for result.

Output:

Here is the out of BAR chart

o1.PNG

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

/wp-content/uploads/2014/01/10_364589.png

Customizing Step2:

Go to series option and choose Default series. Then click on “Show Label” check box as below

c2.PNG

Customizing Step3:

Go to “Text Properties” ans set the vertical postion to “Top”, as below

c3.PNG

Now, let us run our application to see our changes as below

o2.PNG

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

To report this post you need to login first.

5 Comments

You must be Logged on to comment or reply to a post.

  3. Flavio Mendes

    Nice document! I solved the problem of duplicate columns in bar chart. In the SERIES element, change the property “dataLength” to 1.

    Capturar.PNG

    (0) 
  5. Nishant Bansal

    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



    Test.PNG



    (0) 

Leave a Reply