Application Development Blog Posts
Learn and share on deeper, cross technology development topics such as integration and connectivity, automation, cloud extensibility, developing at scale, and security.
cancel
Showing results for 
Search instead for 
Did you mean: 
Former Member

Graph can be created by many ways like standard FM’s, Standard functionality given in Menu, Classes. I opted to use classes as customization can be done using classes.

Mainly we have 2 classes to generate graphs. These classes are part of chart engine. It's very easy to use these classes and they need input in the form of XML files They are :

1.    CL_IGS_CHART                         Internet Graphics Server: Chart

2.    CL_IGS_CHART_ENGINE            Internet Graphics Service: Chart Engine

Both of these classes will use another class: CL_GUI_HTML_VIEWER (HTML Control Proxy Class ) to generate the image of graph and to show it.

In order to show the graph we need to follow following steps.

1.    First make sure that Chart Interpreter is installed. This can be done using method “cl_igs_data=>is_registered_type” and passing Destination as “IGS_RFC_DEST”.

2.    Create a reference variable to “cl_igs_chart” as “igs_chart”.

3.    If IGS is installed then generate a Screen to your program. We need to put our code in PBO and PAI modules of Screen..

4.    In PBO module, we need to do the following steps:

4.1.  Create hmtl control using statement “CREATE OBJECT g_html_control”.

4.2.  Set RFC destination using cl_gfw=>its_rfc_dest and passing RFC destination.

4.3.  Create chart object using “Create Object” statement.

4.4.  Set the Group ID and Category of graph, these will be maintained as the X and Y axis of Graph.

4.5.  It is assumed that we have our data in internal table. So get data from internal table keeping group ID as reference variable and populate the following parameters.

4.5.1.      GROUPID : Fix reference variable

4.5.2.      X  :   Values to be displayed against X axis

4.5.3.      Y  :   Values to be displayed against Y axis

4.5.4.      Z   :  Values to be displayed against Z axis

4.5.5.      COLOR: Code of color to be displayed in Bar.

4.5.6.      EXTENSION: Any hyperlink to be attached to bar.

4.5.7.      DATALABEL:  Label of bar value shown against each Bar.

4.6.  Before putting our data in the final Data table we can set following properties of graph.

4.6.1.      Set picture size using following parameters:
  igs_chart->width =  640.
  igs_chart->height = 480.

4.6.2.      Select Chart type using below options:

igs_chart->type = cl_igs_chart=>CO_TYPE_COLS. “ Shows LandScape

igs_chart->type = cl_igs_chart=>CO_TYPE_BARS. “ Shows Portrait Mode

We can have other chart types as well, they could be selected through Attributes of class.

4.6.3.      As I mentioned earlier that Color schema of Legend will not change as per colors of Bars, hence it does not matches. So I prefer to remove legend.. This could be done using below mentioned code.

igs_chart->legend = cl_igs_chart=>CO_LEGEND_NONE.

We can have other legend schema as well, they could be selected through Attributes of class.

4.6.4.      Set the Title to be shown in Graph in a variable of String type and could be assigned to graph using below code.

igs_chart->title = l_title. 

4.6.5.      Pass the internal table having final data into igs_chart->data.

4.6.6.      Create picture using method “igs_chart->send”.

4.6.7.      Call method load_data of the class cl_gui_html_viewer, it will give us automatically generated URL.

4.6.8.      Use this URL to create a HTML source code containing Title and Image source in the form of URL.

4.6.9.      Get url of output data using method “g_html_control->load_data” passing HTML source code generated in previous step. It wil give us URL which we use to get our graph.

4.6.10.    Load the picture by using the url generated by the data provider using METHOD “g_html_control->show_url”.

5.    In PAI module do the following steps:

5.1.          Activate event analysis of object-oriented Control Framework using METHOD “cl_gui_cfw=>dispatch.”

5.2.          Handle other Events Like BACK or EXIT as per requirement.

Source Code:

* DATA DeclarationDATA : g_t_wc_disp2 TYPE TABLE OF zcpl_rewrite_metrics_wc_disp,
      wa_wc_disp2  
TYPE zcpl_rewrite_metrics_wc_disp.
* global parameters to get data from calling programPARAMETERS:
p_dates       
TYPE string NO-DISPLAY,
p_dest        
TYPE char32 DEFAULT 'IGS_RFC_DEST' NO-DISPLAY,
p_count       
TYPE i DEFAULT 1 NO-DISPLAY,
p_mode        
TYPE string NO-DISPLAY.
* global dataDATA:
  g_html_control
TYPE REF TO cl_gui_html_viewer,
  g_html        
TYPE w3htmltabtype,
  g_url         
TYPE w3url,
  g_bool_result 
TYPE c,* dynpro data
  ok_code       
TYPE sy-ucomm,
  g_firstcall   
TYPE i,
  g_count       
TYPE i.
REFRESH : g_t_wc_disp2.CLEAR :    wa_wc_disp2,
           g_html_control,
           g_html,
           g_url,
           g_bool_result,
           ok_code,
           g_firstcall,
           g_count.*****************************************************CONSTANTS c_x TYPE char1 VALUE 'X'.* class importsCLASS cl_gfw DEFINITION LOAD.
* entry point
START-
OF-SELECTION.
* check existance of chart interpreter
 
CALL METHOD cl_igs_data=>is_registered_type
   
EXPORTING
      destination             = p_dest
     
type                    = cl_igs_chart=>interpreter_type
    RECEIVING
      rval                    = g_bool_result
   
EXCEPTIONS
      rfc_communication_error =
1
      rfc_system_error        =
2
      internal_error          =
3
     
OTHERS                  = 4.
 
IF sy-subrc NE 0.
   
MESSAGE text-001 TYPE text-025"  Could not reach IGS    'I'.
   
EXIT.
 
ELSEIF g_bool_result IS INITIAL.
   
MESSAGE text-002 TYPE text-025"  No "Chart" interpreter installed on IGS    'I'
   
EXIT.
 
ENDIF.

 
CALL SCREEN 100.
END-OF-SELECTION.*&---------------------------------------------------------------------**&      Module  PBO_0100  OUTPUT*&---------------------------------------------------------------------*MODULE pbo_0100 OUTPUT.

 
SET PF-STATUS '100'.

 
IF g_firstcall IS INITIAL.
*   create hmtl control
   
CREATE OBJECT g_html_control
     
EXPORTING
        parent = cl_gui_container=>default_screen.
*   set rfc destination
    cl_gfw=>its_rfc_dest = p_dest.
*   create chart
    g_count = p_count -
1.
   
DO g_count TIMES.
     
PERFORM create_chart USING g_html ' '.
   
ENDDO.
   
PERFORM create_chart USING g_html c_x .    " 'X'.
*   get url of output data
   
CALL METHOD g_html_control->load_data
     
EXPORTING
       
type         = text-003        "'text'
        subtype      =
text-004        "  'html'
     
IMPORTING
        assigned_url = g_url
     
CHANGING
        data_table   = g_html.
**   Load the picture by using the url generated by the data provider.
   
CALL METHOD g_html_control->show_url
     
EXPORTING
        url = g_url.

    g_firstcall =
1.
 
ENDIF.
ENDMODULE.                 " PBO_0100  OUTPUT
*&---------------------------------------------------------------------**&      Module  PAI_0100  INPUT*&---------------------------------------------------------------------*MODULE pai_0100 INPUT.
* activate event analysis of object-oriented Control Framework
 
CALL METHOD cl_gui_cfw=>dispatch.
* handle other events
 
CASE ok_code.
   
WHEN text-005.         "'BACK'.
     
LEAVE PROGRAM.
   
WHEN text-006.        " 'EXIT'.
     
LEAVE PROGRAM.
 
ENDCASE.
ENDMODULE.                 " PAI_0100  INPUT
*&---------------------------------------------------------------------**&      Form  create_chart*&---------------------------------------------------------------------*FORM create_chart USING l_html TYPE w3htmltabtype l_real.

 
DATA:
    igs_chart        
TYPE REF TO cl_igs_chart,
    l_line           
TYPE igs_data,
    l_data           
TYPE igs_data_tab,
    mime             
TYPE w3mimetabtype,
    html             
TYPE w3htmltabtype,
    l_html_line      
TYPE w3html,
    l_url            
TYPE w3url,
    l_content_length 
TYPE i,
    l_content_type   
TYPE w3param-cont_type,
    l_content_subtype
TYPE w3param-cont_type,
    l_wc_count       
TYPE I.

 
clear l_wc_count.

 
DATA : l_title TYPE string.
* empty result table
 
REFRESH l_html.
* create chart object
 
CREATE OBJECT igs_chart.
IF  P_Mode = TEXT-026.
  igs_chart->type = cl_igs_chart=>CO_TYPE_BARS.
   
ELSEIF P_Mode = TEXT-027.
  igs_chart->type = cl_igs_chart=>CO_TYPE_COLS.ENDIF.
DATA: G_IGS_LABEL_TAB TYPE IGS_LABEL_TAB,
      W_IGS_LABEL    
TYPE IGS_LABEL.

      W_IGS_LABEL-
ID = TEXT-009.
     
APPEND W_IGS_LABEL TO G_IGS_LABEL_TAB.
        igs_chart->LABELS_GROUPID  = G_IGS_LABEL_TAB.
     igs_chart->LABELS_CATEGORY = G_IGS_LABEL_TAB.
* set picture size
  igs_chart->width = 
text-007.                             "640.
  igs_chart->height =
text-008.                             "480.
DESCRIBE TABLE g_t_final LINES l_wc_count.* Change size if more than 6 WC and Landscape ModeIF l_wc_count > 6 AND P_Mode = TEXT-027.* set picture size
  igs_chart->width = 
TEXT-028.                             "1300.
  igs_chart->height =
text-008.                             "480.ENDIF.

 
LOOP AT g_t_final INTO wa_final.
    l_line-groupid   =
text-009.            " 'GREEN'.
    l_line-
x         = wa_wc_disp2-vaplz.
    l_line-y         = wa_wc_disp2-g_green.
    l_line-
color     = text-012.              "18.
   
APPEND l_line TO l_data.
   
CLEAR wa_final.
 
ENDLOOP.

 
LOOP AT g_t_final INTO wa_final.
    l_line-groupid   =
text-010.            " 'YELLOW'.
    l_line-
x         = wa_wc_disp2-vaplz.
    l_line-y         = wa_wc_disp2-g_yellow.
    l_line-
color     = text-013.              "10.
   
APPEND l_line TO l_data.
   
CLEAR wa_final.
 
ENDLOOP.


 
LOOP AT g_t_final INTO wa_final.
    l_line-groupid   =
text-011.            " 'RED'.
    l_line-
x         = wa_wc_disp2-vaplz.
    l_line-y         = wa_wc_disp2-g_red.
    l_line-
color     = text-014.              "59.
   
APPEND l_line TO l_data.
   
CLEAR wa_final.
 
ENDLOOP.

  igs_chart->data = l_data.
  igs_chart->color_scheme =  cl_igs_chart=>CO_SCHEME_REVERSE.
  igs_chart->legend = cl_igs_chart=>CO_LEGEND_NONE. 
* set titles
p_dates 
INTO l_title SEPARATED BY space.
  igs_chart->title = l_title.
* create picture
 
CALL METHOD igs_chart->send
   
IMPORTING
      content_type            = l_content_type
      content_length          = l_content_length
      content                 = mime
      imagemap                = html
   
EXCEPTIONS
      rfc_communication_error =
1
      rfc_system_error        =
2
      internal_error          =
3
     
OTHERS                  = 4.
 
IF sy-subrc IS INITIAL AND l_real NE space.
   
SPLIT l_content_type AT '/' INTO l_content_type l_content_subtype.    "

   
CALL METHOD g_html_control->load_data
     
EXPORTING
       
type         = l_content_type
        subtype      = l_content_subtype
       
size         = l_content_length
     
IMPORTING
        assigned_url = l_url
     
CHANGING
        data_table   = mime.

   
CONCATENATE
    
'<HTML><HEAD><TITLE>SAP IGS Chart</TITLE></HEAD>'
    
'<BODY BGCOLOR=#DEDEC8>'
    
'<MAP NAME=chart>'
     
INTO l_html_line-line.
   
APPEND l_html_line TO l_html.
   
APPEND LINES OF html TO l_html.
   
CONCATENATE
    
'</MAP>'
    
'<IMG SRC="' l_url '" USEMAP=#chart BORDER=0>'
    
'</BODY></HTML>'
     
INTO l_html_line-line.
   
APPEND l_html_line TO l_html.
 
ENDIF.
ENDFORM.                    " create_chart

2 Comments