Vary color of a single column in Business Graphic UI Element – Columnar/Chart Type
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.
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:
- 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|
|Initialization Lead Selection checked|
|MON||STRING||Chart X-Axis/Category Values|
|COUNT||I||Chart Y-Axis/Series Values|
|ID||STRING||Customizing ID of chart colors|
- Go to View->Layout and create a Business Graphics UI element (BG).
- 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.
- 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.
- Please see the below values of the BG UI element and properties for binding highlighted in Yellow.
- 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:
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.
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.
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.