Skip to end of metadata
Go to start of metadata

To display a business graph in Web Dynpros. 

Ø      A graph to display the percentages of a student in 3 different Subjects.

Ø      So we create a node 'PERCENTAGE' and its attributes i.e. the subjects 'Mathematics', 'Science' and 'English'.

Ø      There are 2 important details of a 'Business Graph'

1.      Category

2.      Series 
Ø       Category acts like the 'X' axis and Series acts like a 'Y' axis.

Ø      There are 2 types of  Series.

1.      Series

2.      Simple Series 
Ø      We are using Simple Series in our example.  

  1. First create a web dynpro component.
  2. Go to the main view, double click and in the context of the view create the node and attributes.
  3. Now in the context create a node say 'PERCENTAGE' and its attributes as 'MATHS' type i, 'SCIENCE' type i, 'ENGLISH' type i and 'STATUS' type string.
  4. In the main view's layout, select a UI element 'BUSINESS GRAPH'.


5.  Now our layout looks like this. Now we have to insert categories and series in to this UI element.

6.   We can also customize the colors of the graph.

7. Now right click on the Business graph and press insert 'CATEGORY'. Category acts like an X-axis. Here 'STATUS' is the category.

8. The subjects Mathematics, Science and English are the Y-axes so they have to be declare as series.

9. So have to declare the subjects as series say 'Math', 'Sci' and 'Eng'.

10. Here we have declared them as 'Simple Series'.

11. After the series and category has been included the layout looks like this.

12.  In Simple Series there is a property called 'VALUE', the respective subject or attribute has to be bind to this property.

13. For example the Series of the subject 'Mathematics' looks like this


14.  We can use 'CODE WIZARD' to get the declarations.(Code Wizard->Select Read node/attribute button -> F4 and select our node->press Enter)
Now in the 'DOINIT' Method we have to write the following code.SPAN

  method wddoinit .

  data lo_nd_percentage type ref to if_wd_context_node.
  data lo_el_percentage type ref to if_wd_context_element.
  data ls_percentage type wd_this->elements_percentage.
  data lw_percentage like line of ls_percentage.

* navigate from <CONTEXT> to <PERCENTAGE> via lead selection
  lo_nd_percentage = wd_context->get_child_node( name = wd_this->wdctx_percentage ).

*  call method wd_context->get_child_node
*    exporting
**      index      = USE_LEAD_SELECTION
*      name       = 'PERCENTAGE'
*    receiving
*      child_node = lo_nd_percentage

lw_percentage-status = 'Q'.
  lw_percentage-maths = '100'.
  lw_percentage-science = '80'.
  lw_percentage-english = '75'.
  append lw_percentage to ls_percentage.

lw_percentage-status = 'H'.
  lw_percentage-maths = '90'.
  lw_percentage-science = '60'.
  lw_percentage-english = '65'.
  append lw_percentage to ls_percentage.

lw_percentage-status = 'A'.
  lw_percentage-maths = '80'.
  lw_percentage-science = '50'.
  lw_percentage-english = '55'.
  append lw_percentage to ls_percentage.

call method lo_nd_percentage->bind_table
    new_items            = ls_percentage
*    set_initial_elements = ABAP_TRUE
*    index                =


 To create a Web Dynpro Application:

  1. One the declarations are done we have to append our logic i.e. give some values or marks for the subjects and the Status here is 'Quarterly' ,'Half yearly' and 'Annual'.
  2. So once the coding is done save and activate the component.
  3. Now we have to create the Web Dynpro Application.
  4. Execute it and here is the result.