Additional Blogs by SAP
cancel
Showing results for 
Search instead for 
Did you mean: 
kai_gutenkunst
Active Contributor

In the early R/3 times developers had to use these GRAPH* function modules for displaying different kinds of graphics. Embedding of controls was not yet invented in SAPGUI, therefore these graphics were run with separate executables displayed in different windows.

Nowadays we have the modern chart engine, not only as part of the IGS (Internet Graphics Service) but also as a control within SAPGUI. No matter which UI technology is used the chart engine always expects the data and the chart settings (customizing) as XML documents.

 

As using the XML classes to create XML documents may look somehow complex compared to the simple filling of an internal table (as with the old graphics function modules) I looked for a way of making this easier. So the question is how to pass an internal table with the data to the chart engine.

 

The solution is to convert the internal table into the chart engine XML. And this is very easy by using the ABAP command CALL TRANSFORMATION. Your internal table is then converted by a Simple Transformation (or XSLT) according to the rules you defined. That’s the proper way to convert an internal table!

 

I know that some of you might think that this still sounds too complex. And therefore developers sometimes start using the ABAP command CONCATENATE to create their XML documents. Maybe that’s successful for fast prototyping but never use this technique in your productive applications!

As soon as there are special characters in your strings the concatenated result looks like an XML document, but in fact the encoding is wrong and the document cannot be parsed properly! In other words, it’s useless for the chart engine and some garbage will be displayed.

Enough for the warnings, let’s continue with the transformations.

 

Never heard of such transformations before? Never mind. Let’s start with a small demo report with two transformations that you can easily reuse (and adapt to your requirements if needed).

So let’s start with the example:

 

 

 

We start with two internal tables: series_table is for data series. Each series has a label (to be displayed within the legend of the chart) and a list of values. Additionally we use categories to define the labels at the category axis.

 

 

We also need a dynpro container and the chart engine. Do not forget to create a custom control in your dynpro using the screen painter (id should be ‘CONTAINER’, see below).

 

 

The internal tables are filled with some demo data. And now the most important part starts. Both tables are passed to a transformation. The result is returned as an XML document (stored in an xstring).

 

 

Before creating the transformation let’s finish the small demo report first!

When developing transformations it’s always a good idea to directly check the XML results. If you want to see it simply call

 

 

After preparing the data as an XML document it’s time to create the chart engine control:

 

 

The data is passed to the chart engine. And finally we have to tell the chart to render itself in PBO:

 

 

No more ABAP coding is required. Just compare this easy filling of the internal tables with creating the XML document directly using the XML classes!

However, before running this report we have to create a transformation called test_ce_tables2xml. Start with double-clicking on the name. Choose Yes for creating the new object. And in the next dialog provide a proper description and choose Simple Transformation.

The editor already shows a skeleton of a Simple Transformation. Replace it by the following one:

 

 

Save and activate it and reuse this transformation for all your applications using the chart engine! In the future you simply fill the internal tables with the given type definition and do a CALL TRANSFORMATION. That’s it!

In case you want to know more about this transformation let’s have a closer look: our internal tables are defined as parameters CATEGORIES and SERIES. The Simple Transformation starts with looping over the CATEGORIES table. Therefore each line of the internal table creates a new Category tag with the content of the current line (i.e. the category text). The same is done for the SERIES table. But as the series table is a nested table (i.e. each series has a table of values) the transformation also contains a nested loop: each line of the current VALUES table creates a new Point tag defining the current value as of type y.

Providing y values fits for the basic chart types. If you want to use more complex chart types you should take a look at the documentation contained in the SAP Chart Designer (available on SDN downloads page in section Tools for Application server). The documentation describes which chart types require which value types in the data.

 

We shouldn’t forget to run our application. The chart displays our data using some default customizing settings:

 

"

 

The sample principle – using a transformation for creating an XML document – can be easily used for the customizing XML also! Usually you use the SAP Chart Designer for changing chart settings interactively and saving them as a customizing XML. Such an XML document can directly be used in your application.

However, to demonstrate the power of the Simple Transformations we create a small XML document on the fly (the following lines have to be inserted somewhere before method render is called):

 

 

Here we call a new transformation with some parameters for defining the chart title, the titles of both axes and the chart type. As there are no tables involved the simple transformation looks pretty easy:

 

 

In this simple transformation we have four parameters that are passed to the appropriate XML tags of the SAPChartCustomizing.

And finally look at the new chart:

  

 

Having seen how easy it is to use Simple Transformations for creating XML documents this should help in using the chart engine in your projects!Feel free to use these transformations and modify them if you want to use more complex chart types and change other customizing settings!
7 Comments