Skip to Content
This morning, I noticed a twitter post by @monkchips  (http://twitter.com/monkchips) that Google had just released a new Charting API.  I had a little time to kill before my first meeting of the day, so I decided to check this out.
You can of course read all about the new API on Google’s website directly:
http://code.google.com/apis/chart/

Here is the short summary, though.  Basically Google is using a URL based interface to allow you to very simply create graphs and charts. This makes it incredibly simple to embed the chart generation directly into your website since it is all URL based. For example you can embed the dynamic URL with all the data to create the chart’s data points right into an Image Tag.

Now the chart formatting and data range options are not the most robust. SAP’s own IGS (Internet Graphics Server) has a much wider range of options.  However the Google approach does have advantages in its simplicity.  Because the URLs and charts could be accessed from anywhere, you could imbed them in emails and not worry about having to place an IGS server outside your firewall.  Also you don’t have to send the actual GIF or PNG file in the email, just the URL.  The actual image will be generated when needed.  Also because of the way the details are embedded in the URL, you get a nice caching mechanism built right into the browser.
On the negative side however, the URL based approach does make some things more difficult.  It means that you have to some strange encoding to your data points to place into the URL.  Also if you mess up any of the parameter names in the URL, you might just end up with a broken image link.  It can make debugging the chart generation a bit of a nightmare.
So what I wanted to do is to make it easier to use the Google Charting API from ABAP.  I wanted to do several things.  First I wanted to make it easier to take an ABAP Internal Table and turn it into the encoded data point format that the API expected in the URL.  For that I create an ABAP class that has two static methods.  The first will take in any ABAP internal table. It lets you specify the column that you want and it will generate a data series off of that column.  The second method loops through a data series and supports the process to encode the data into the three different types of encodings that Google understands – simple, text, and extended.
So these methods make it easy enough to format the data, but you still have a lot of room for errors. To help with that I create a class full of constants to represent all the parameter names and many of the enumerations.  For instance I used thse constants when I created a BSP Extension Wrapper around the API calls. This way the input parameter values get validated at Compile Time.
  
These two elements come together in BSP or Web Dynpro ABAP to make it much easier to generate a Google Chart.  Here is the code that it takes from BSP:
%@page language="abap" %
%@extension name="htmlb" prefix="htmlb" %
%@extension name="zgoogle" prefix="zgoogle" %
<htmlb:content design="design2003" >
  <htmlb:page title=" " >
    <htmlb:form>
    <%
      data: l_data type zgoogle_chart_series_tbl,
            l_sflight type standard table of sflight,
            l_ref type ref to data.
      select * from sflight into table l_sflight where carrid = 'AA'.
      get REFERENCE OF l_sflight into l_ref.
      zcl_google_chart_api_gen=>abap_table_to_api(
        exporting
          I_DATA = l_ref
          I_DATA_COLUMN = 'SEATSOCC'
       changing
         e_CHART_DATA = l_data ).
    %>
      <zgoogle:chart chartType    = "<%= zcl_google_chart_api_const=>chart_type_line %>"
                     encodingType = "<%= zcl_google_chart_api_const=>encoding_type_extended %>"
                     height       = "200"
                     table        = "<%= l_data %>"
                     width        = "300" />
    </htmlb:form>
  </htmlb:page>
</htmlb:content>
And very similar logic could be used from Web Dynpro ABAP.  The main difference here is that you just put the URL into the Context and then bind this context attibute to an image UI element.
method wddoinit .
  data: l_data type zgoogle_chart_series_tbl,
           l_sflight type standard table of sflight,
           l_ref type ref to data.
  select * from sflight into table l_sflight where carrid = 'AA'.
  get reference of l_sflight into l_ref.
  zcl_google_chart_api_gen=>abap_table_to_api(
    exporting
      i_data = l_ref
      i_data_column = 'SEATSOCC'
   changing
     e_chart_data = l_data ).
  data: l_parameters type zgoogle_chart_parameter_tbl.
  field-symbols: <wa_param> like line of l_parameters.
  data: l_url type string.
  try.
      l_url =  zcl_google_chart_api_gen=>generate_url(
           i_parameters = l_parameters
           i_data       = l_data
           i_encoding   = zcl_google_chart_api_const=>encoding_type_extended ).
    catch zcx_google_chart_api.
 endtry.
  data lo_el_context type ref to if_wd_context_element.
  data ls_context type wd_this->element_context.
* get element via lead selection
  lo_el_context = wd_context->get_element(  ).
* get single attribute
  lo_el_context->set_attribute(
    exporting
      name =  `URL`
      value = l_url ).
endmethod.

So if you are intested any of this coding, it is all available for download.I have it listed on its own google code website:

https://cw.sdn.sap.com/cw/docs/DOC-149108

I listed the code as a transport file and as SAPlink.  The SAPlink is broken down so you can grab just the core classes, the BSP example, or the Web Dynpro ABAP example.

Have fun!

To report this post you need to login first.

19 Comments

You must be Logged on to comment or reply to a post.

  1. Ignacio Hernández
    Hi Tom
    I’m fan of your work, you know that. I believe You are bringing ABAP platform to a new level. In fact I was inspired for your work to write some of my blogs. We/You/I/everybody@SDN could join all that work ( abap-flickr, abap-fckeditor, FLOB, YouTube@ABAP, ZWIKI…) in some kind of “ABAP Toolkit for Mashup Development and Composition” … new web open apis and Enterprise development joined can be an explosion…
    Regards,
    Ignacio.
    (0) 
    1. Thomas Jung Post author

      >All those tags <%> etc. looks very tedious and annoying to program. I’ll stick with good old regular ABAP for now. <br/><br/>Really I have never really given that much thought.  The <%> tags to separate the server side scripting from the layout is pretty normal. The same concepts are used in JSP and ASP. <br/><br/>I would be cautious about only sticking to “old regular ABAP”.  There is a whole world of things that can be done with BSP and Web Dynpro ABAP that just isn’t possible from the “old” ABAP.

      (0) 
      1. Kenneth Moore
        I guess you can get used to anything.  Kind of like Stockholm syndrome for programmers.  “It is tedious and difficult to type without looking at my fingers while typing, but I love it!”
        (0) 
        1. Ignacio Hernández
          Hi Kenneth
          I know ABAP platform and I know Thomas Jung work. He is highly collaborating to improve platform.
          I am a Java and Web developer by vocation, I am not 100% of time programming but I really like time I am doing it, it’s a creative activity.
          Thomas example is clear and I had sa few times requeriment to do graphics, it’s a common business scenario.
          I don’t know if you are a programmer or developer, but if you are, please tell me what are you doing and the way you have to do that Thomas are showing. I would like to learn.
          Regards,
          Ignacio.
          (0) 
          1. Kenneth Moore
            This is probably a discussion for another BLOG, but I just think ergonomics should be applied to programming languages just like ergonomics is applied to GUI development.  Develop a programming language using keystrokes which you can type without having to look down at your fingers while typing (if you are a typist).  The programming language should work the way the programmer works, not the opposite.  Ergonomics.  ABAP is fairly ergonomic, if you are a typist – typist meaning you don’t look at your fingers while typing.  That’s all I’m saying.  But like I said, this is a whole other discussion.
            (0) 
              1. Kenneth Moore
                Ignacio, I think the natural language programming languages, like ABAP, COBOL for example, are fairly ergonomic.  I haven’t really thought of ways to improve ABAP or Java or other languages.  But when I see other programming languages over using obscure keystroke symbols again and again just to write a few lines of code it just makes me cringe.  I get finger cramps just looking at it!
                (0) 
  2. kraiem adel

    Hi Thomas,

    I tried to reproduce you example. I have an attribute image_url type xstring. The image in linked to this attribute.

    CALL FUNCTION ‘SCMS_STRING_TO_XSTRING’
         EXPORTING
           TEXT   =
    http://chart.apis.google.com/chart?&cht=p&chs=250×100&chd=t:14,86&chdl=%%20Occup|%%20Free&chl=14|86
         IMPORTING
           BUFFER = LV_CHART_GOOGLE
         EXCEPTIONS
           FAILED = 1
           OTHERS = 2.

    IF SYSUBRC EQ  0.
    *   set single attribute
         LO_EL_CONTEXT->SET_ATTRIBUTE(
           NAME `CHART_GOOGLE`
           VALUE = LV_CHART_GOOGLE ).
       ENDIF.

    But nothing displayed ? any idea please ? (how to use the chart url in the dynamic image please ?)


    (0) 
    1. Thomas Jung Post author

      Why are you converting the string to an xstring?  You must supply the URL to the source property of the Image and this property expects a string. 

      I think part of the problem is that the above blog is all corrupted.  There should be much more content along with samples.  However it seems the conversion to the new SCN has lost this content.  I’ve placed a post in the  problems forum hoping someone from the content team can restore the blog from the old system.

      (0) 
      1. Eude Nicolas

        Hi Thomas,

        Thanks for your papers and your work.

        I want to use google chart, because i want to do great graph in Web Dynpro Abap Portal 7.2.

        I can’t use SAPUI5 in sap portal 7.2.

        Do you know a another way ?

        I want to use (CHIPS, BSP and google chart)

        Thank for your Help and Merry Christmas.

        Nicolas

        (0) 
        1. Thomas Jung Post author

          Why can’t you use SAPUI5?  SAPUI5 is release independent and available for 7.0 and higher.  It runs within the BSP runtime and therefore can be integrated into the Portal or Web Dynpro (via iFrame or CHIPs). 

          The google charts would work as well via iFrame or CHIPs, but I would recommend the SAPUI5 charts.  They are quite nice and have built in binding to both JSON and OData services.  Its pretty easy to create the service using Gateway or even just a BSP page or ICF handler class and consume the output in the SAPUI5 Charts.

          (0) 
          1. Eude Nicolas

            Hi Thomas,

            Thanks for your help, i agree with you. Sapui5 is very well.

            I tried on SapCloud and i like this.

            But i must do that on IE8 and i think the sapui5 chart don’t work on IE8.

            Do you know a another way to do nice graph.

            Regards.

            Nicolas

            (0) 
            1. Thomas Jung Post author

              That’s true that according to the PAM only IE9 and IE10 are techincally supported. Then why not use the Google Charts as described here?  Or any number of third party JavaScript charting libraries? Although I think you will find that many of those don’t support IE8 either.  We use D3 within SAPUI5. 

              https://github.com/mbostock/d3/wiki

              “D3 supports so-called “modern” browsers, which generally means everything except IE8 and below.”

              The D3 project suggests the use of Aight to make D3 work within IE8.  This might be something worth looking into:

              https://github.com/shawnbot/aight

              (0) 

Leave a Reply