Additional Blogs by Members
cancel
Showing results for 
Search instead for 
Did you mean: 
Former Member

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 <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:

Displaying a Pie Chart... Just change 'Hist' to 'Pie' :smile: . (Note that Series 2 isn't displayed...)

Hope that this post is usefull for someone. Enjoy!

Carlos

6 Comments