Thursday, December 20, 2007

Google Charting API Wrapper for ABAP

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" %>
  
    
    <%
      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 ).
 
    %>
          = "<%= zcl_google_chart_api_const=>chart_type_line %>"
                     encodingType = "<%= zcl_google_chart_api_const=>encoding_type_extended %>"
                     height       = "200"
                     table        = "<%= l_data %>"
                     width        = "300" />
    
  

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

http://code.google.com/p/abapchart/

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.

No comments:

Blog Archive