Skip to Content
Author's profile photo Former Member

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:

Capture1.JPG


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.

Capture2.JPG

Capture3.JPG

After creating, go to “SourceCde”. In here we’ll create our customizing.


Capture4.JPG

This is our base. Element <tt:root name=”ROOT”/> indicates that it will be a parameter when calling Transformation. Since I only want to change Title and chart type, I’ve just created an tt:root element named title and another named chart_type.


Between tags <tt:template></tt:template> 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:



<?sap.transform simple?>
<tt:transform xmlns:tt="http://www.sap.com/transformation-templates">
   <tt:root name="CHART_TYPE"/>
   <tt:root name="CHART_TITLE"/>
   <tt:template>
     <!--Begin of inserted code-->
     <SAPChartCustomizing version="2.0">
       <GlobalSettings>
         <Defaults>
           <ChartType>
             <tt:value ref="CHART_TYPE"/>
           </ChartType>
         </Defaults>
       </GlobalSettings>
       <Elements>
         <ChartElements>
     </ChartElements>
         <Title>
           <Caption>
             <tt:value ref="CHART_TITLE"/>
           </Caption>
           <Position>Top</Position>
         </Title>
       </Elements>
     </SAPChartCustomizing>
     <!--end of inserted code-->
   </tt:template>
</tt:transform>







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).


<?sap.transform simple?>
<tt:transform xmlns:tt="http://www.sap.com/transformation-templates">
   <tt:root name="CATEGORIES"/>
   <tt:root name="SERIES"/>
   <tt:root name="LABEL"/>
   <tt:root name="ID"/>
   <tt:template>
     <!--Begin Insertion-->
     <ChartData>
       <Categories>
         <tt:loop ref="CATEGORIES">
           <Category>
             <tt:value/>
           </Category>
         </tt:loop>
       </Categories>
       <tt:loop ref="SERIES">
         <Series>
           <tt:attribute name="label">
             <tt:value ref="LABEL"/>
           </tt:attribute>
           <tt:attribute name="customizing">
             <tt:value ref="ID"/>
           </tt:attribute>
           <tt:loop ref="VALUES">
             <Point>
               <Value type="y">
                 <tt:value/>
               </Value>
             </Point>
           </tt:loop>
         </Series>
       </tt:loop>
     </ChartData>
     <!--End Insertion-->
   </tt:template>
</tt:transform>



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:


<ChartData>
    <Categories>
      <Category>Cat 1</Category>
      <Category>Cat 2</Category>
      <Category>Cat 3</Category>
    </Categories>
    <Series Customizing='Series1' label='Series 1'  >
      <Point>
        <Value type="y">5</Value>
      </Point>
      <Point>
        <Value type="y">10</Value>
      </Point>
      <Point>
        <Value type="y">7</Value>
      </Point> 
    </Series>
    <Series Customizing='Series2' label='Series 2'  >
      <Point>
        <Value type="y">7</Value>
      </Point>
      <Point>
        <Value type="y">9</Value>
      </Point>
      <Point>
        <Value type="y">23</Value>
      </Point> 
    </Series>
</ChartData>



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:

Capture5.JPG

Displaying a Pie Chart… Just change ‘Hist’ to ‘Pie’ 🙂 . (Note that Series 2 isn’t displayed…)

Capture6.JPG

Hope that this post is usefull for someone. Enjoy!

Carlos

Assigned Tags

      6 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Bruno Esperança
      Bruno Esperança

      Thanks for sharing! Bookmarked to try in the future 🙂

      Cheers,

      Bruno

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Bruno,

      I'm, glad you liked it.

      Carlos

      Author's profile photo Paul Hardy
      Paul Hardy

      I would also note that ABAP2XLS has similar functionality, where you start with your data in SAP and then create a spread sheet with fancy graphs upon it.

      ABAP2XLS also works by generating XML which is turned into a spread sheet which is downloaded to your PC online or emailed to someone in the background via a batch job.

      The good thing about that method is you just say what you want using ABAP, and the ABAP2XLS framework does the hard yards of turning the data into XML for the spread sheet, so you don't have to manually create a transformation.

      Sad to say, but there is no comparison between looking at graphics in EXCEL and looking at the same sort of thing within SAP. The "business graphics" within SAP are not the most wonderful thing in the universe.

      I recall that the UK TV program "Top Gear" once managed to turn take a Combine Harvester to the North Pole and use it as a snowplough. That worked, but it is not what the machine was designed for/good at.

      Cheersy Cheers

      Paul

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Paul,

      Thank you for your comment. It's always nice to know that there is an alternative. I've looked at ABAP2XLS before, but never in depth. I found it's hard to tell a customer to install a third party package without trying it before.

      Despite that, I think that there are room for both solutions. With my approach I am able to show in (almost) real-time charts in SAP. I is possible to create a cockpit with several charts controlling a part of business in a graphical manner (production, shipping,...). With ABAP2XLS I don't this this is possible.

      Cheers,

      Carlos

      Author's profile photo Bruno Esperança
      Bruno Esperança

      Hi Carlos,

      First off, let me start by saying that getting a comment from Paul Hardy is an achievement in itself, so congratulations for that 🙂

      What do you mean by "install a third party package"? ABAP2XLSX is just a "normal report" that you put into the system... and then you can use it to do whatever you want.

      Actually, at this point, I think it's pretty much a must-have, as it's 2015 and not being able to upload/download XLSX files at this point is ridiculous.

      Have you taken a look at my file upload utility? It uses ABAP2XLSX to read XLSX files.

      Regardless, I agree with you. Sometimes, even when you "know" there's a better solution for the client, the client still wants the other one. And when the time comes a client wants to see graphics embedded in SAP, you shared a helpful working demo 🙂

      You can lead a horse to water... but you can't make it drink it.

      Cheers!

      Bruno

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Bruno,

      Thank U. Has you know although I came here searching for help, I've never had a very active participation in SCN community. I didn't know Paul before... (gone through some of his comments and topics after his comment and discovered that I have a lot of reading to do... Thanks to Paul 🙂 ).

      When I mentioned a "third party package" I meant just that. ABAP2XLSX is available as a NUGG package (a big black box) with lots of code in it. As I am mostly in clients systems it's hard to add this kind of add ons...

      Cheers,

      Carlos