Easy Charts using CL_GUI_CHART_ENGINE
Recently I had the need to present user with a chart in SAP. I’ve heard about them, seen some samples, but never had the real need to create one.
After some research I’ve created an approach based on SAP Chart Designer Tool and SAP Chart Engine.
My solution is quite simple, you only need to know how to create a Simple Transformation.
SAP Chart Engine provides class cl_gui_container to create Charts. This class relies on XML to add content (data or configuration). It could be done in several ways, but I’ve chosen Simple Transformations.
These are the basic steps:
First step: Create a Chart in Chart Designer.
This is a simple process, and it is a simple tool for you to discover. This is my template:
When one is satisfied with the result, it’s time to save customizing into a XML file (simple go File->Save Customizing).
Second Step: Create Transformation
Configuration.
In order to configure an instance of Chart Engine, we need to pass some data to it, but it has to be in XML. It could be stored at SO10 text, but I want to be able to create different charts with different titles…
1. Create a Simple Transformation:
Simply call STRANS transaction, give it a name and create.
After creating, go to “SourceCde”. In here we’ll create our customizing.
This is our base. Element
Between tags is where i’ll put excerpts of XML config file that came from Char Designer. Be aware that XML must be well formed, and document tree must be coherent.
This is what I’ve created:
Top
Data.
Since Chart Engine works with XML, we have to provide data in XML. It could be done manually, but I think that this is a better way.
So lets create a new simple transformation (ZSIMPLE_CHART_DATA).
This is something that I’ve found on internet (some blogs and scn posts) with some tweeks. Basicly We have to pass data like a XML tree, something like this:
Cat 1 Cat 2 Cat 3 5 10 7 7 9 23
Ok, thats nice… but and now what do we do with it? Create a Chart, that’s waht!
Third Step: Create a Chart
This is simple and I’m not going thu all details. In a short way you need to create a program or whatever with a screen. In that screen you’ll need a Container (Custom, Docking… some kind of a container).
Create Chart
DATA lr_chart TYPE REF TO cl_gui_chart_engine. CREATE OBJECT lr_chart EXPORTING parent = gr_container EXCEPTIONS cntl_error = 1 OTHERS = 2.
If all goes well, let’s customize!
DATA: l_xml TYPE xstring. CALL TRANSFORMATION ZSIMPLE_CHART_CUST SOURCE chart_type = 'Hist' chart_title = 'Simple Chart' RESULT XML l_xml. lr_chart->set_customizing( xdata = l_xml ).
Adding data using Simple transformation requires a mappable data structure:
TYPES lt_values TYPE STANDARD TABLE OF i. DATA: BEGIN OF ls_series, label TYPE string, id TYPE string, values TYPE lt_values, END OF ls_series, lt_series LIKE STANDARD TABLE OF ls_series, lt_categories TYPE STANDARD TABLE OF string.
And now, just create dummy data:
APPEND 'Cat 1' TO lt_categories. APPEND 'Cat 2' TO lt_categories. APPEND 'Cat 3' TO lt_categories. ls_series-id = 'Series1'. ls_series-label = 'Series 1'. APPEND 5 TO ls_series-values. APPEND 15 TO ls_series-values. APPEND 10 TO ls_series-values. APPEND ls_series TO lt_series. CLEAR ls_series. ls_series-id = 'Series2'. ls_series-label = 'Series 2'. APPEND 21 TO ls_series-values. APPEND 10 TO ls_series-values. APPEND 7 TO ls_series-values. APPEND ls_series TO lt_series.
Almost there..
CALL TRANSFORMATION zzsd_pt_monitor SOURCE categories = lt_categories series = lt_series RESULT XML l_xml. lr_chart->set_data( xdata = l_xml ).
Just one thing missing: Render chart!
call method lr_chart->render.
And all this effort just to render something like that:
Displaying a Pie Chart… Just change ‘Hist’ to ‘Pie’ ???? . (Note that Series 2 isn’t displayed…)
Hope that this post is usefull for someone. Enjoy!
Carlos
New NetWeaver Information at SAP.com
Very Helpfull