Vary color of a single column in Business Graphic UI Element - Columnar/Chart Type

[Former Member]

Requirement:

To display the series in the column chart with varying colors based on some condition and also the

Legend to be displayed accordingly using Business Graphics UI element in Webdynpro ABAP.

Sample Output



 

How to Achieve:

• To vary colors we need to use Point Customization and bind to context node


• To show the legend with these colors we need to change properties of the Series ( Or Default Series)

How to do:

1. Create a Webdynpro ABAP component with a view (MAIN) using SE80 transaction.

2. Create a context (TEST) in MAIN view with the following parameters as shown below

Properties of a Node

Node Name                        TEST

Dictionary structure

Cardinality                                            0:n

Selection                              0:1

Initialization Lead Selection         checked

 

Context Attributes

Name	Type	Purpose
MON	STRING	Chart X-Axis/Category Values
COUNT	I	Chart Y-Axis/Series       Values
ID	STRING	Customizing ID of chart colors

 

3. Go to View->Layout and create a Business Graphics UI element (BG).


4. Right Click on the BG to Insert the Category element (CATEGORY) and bind to context attribute (MON).

5. Right Click on the BG to Insert the Series (S1) element of type Series from the dropdown.



 

6. Right Click on the Series (S1) to insert the Point element (POINT1).

7. Right Click on the Point (POINT1) to insert the Value element (VALUE1).

Please see the final image below.



 

8. Please see the below values of the BG UI element and properties for binding highlighted in Yellow.

8. Properties of Category with Binding.

9. Properties of Series (S1) element.



10. Properties of Point (POINT1) element.



11.Properties of Value (VALUE1) element.



12. As shown in the requirement, we need to have 4 colors. To achieve this we use Point Customizing in the BG element.

Right Click on the BG element and click on the ‘EDIT CUSTOMIZING’.



13. This opens a customizing the graph.



14. Go to each property of the graph:

Global settings:

 



Title:

 





 

More Info checkbox to be checked to display the Legend dynamically



Default series will be there and for 4 colors we have created 4 points as shown below.

Series properties:

In the Chart Designer, set the attribute Show in Legend of each series (or the default series) to Never.



Add 4 Points by right click on the Point and Rename them as Point1, Point2, Point3 and Point4. These names have to be used in the coding to vary the colors dynamically.

 



Each point will have the property being set for Color and Caption. Similarly apply different colors to other points as shown below.

'Point1' Customization:



 





 



Caption:  At point Level, Used to display Legend of our choice



 

Apply the same settings with different colors to other three points and change caption accordingly.

Color Codes Used :

Red-rgb(255,0,0) – Point1

Orange-rgb(255,128,0) – Point2

Green-rgb(0,102,0) – Point 3

Blue-rgb(0,128,255) – Point 4

Once saved the customization ID needs to be applied to the BG->Customizing property.

This customizing is stored under MIME node in the components and can be viewed in XML.

15. Coding in WDDOINT method of the view to fill the context node ‘TEST’ and to show the data in      the Chart. Coding can be done based on requirement.

method WDDOINIT .

  data lo_nd_test type ref to if_wd_context_node.

  data ls_test type wd_this->element_test.

  data lt_test type wd_this->elements_test.



* navigate from <CONTEXT> to <TEST> via lead selection

  lo_nd_test = wd_context->get_child_node( name = wd_this->wdctx_test ).

*

ls_test-mon = 'Jan''17'.  “Shown on X-Axis

ls_test-count = 0010.     “Shown on Y-Axis

ls_test-ID = 'Point4'.       “To vary colors

append ls_test to lt_test.



ls_test-mon = 'Feb''17'.

ls_test-count = 0020.

ls_test-ID = 'Point3'.

append ls_test to lt_test.



ls_test-mon = 'Mar''17'.

ls_test-count = 0030.

ls_test-ID = 'Point2'.

append ls_test to lt_test.



ls_test-mon = 'April''17'.

ls_test-count = 0040.

ls_test-ID = 'Point1'.

append ls_test to lt_test.



 IF lo_nd_test IS not INITIAL.

  lo_nd_test->bind_table( new_items = lt_test set_initial_elements = abap_false ).

 ENDIF.

endmethod.

 

16. Save the component and Run the webdynpro application.