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 TYPETABLEOF 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 TYPEiDEFAULT1NO-DISPLAY,
p_mode TYPE string NO-DISPLAY.
* global dataDATA:
g_html_control TYPEREFTO cl_gui_html_viewer,
g_html TYPE w3htmltabtype,
g_url TYPE w3url,
g_bool_result TYPEc,* dynpro data
ok_code TYPE sy-ucomm,
g_firstcall TYPEi,
g_count TYPEi.
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 DEFINITIONLOAD.
* entry point
START-OF-SELECTION.
* check existance of chart interpreter
CALLMETHOD 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 NE0.
MESSAGEtext-001TYPEtext-025 . " Could not reach IGS 'I'.
EXIT.
ELSEIF g_bool_result ISINITIAL.
MESSAGEtext-002TYPEtext-025 . " No "Chart" interpreter installed on IGS 'I'
EXIT.
ENDIF.
CALLSCREEN100.
END-OF-SELECTION.*&---------------------------------------------------------------------**& Module PBO_0100 OUTPUT*&---------------------------------------------------------------------*MODULE pbo_0100 OUTPUT.
SET PF-STATUS '100'.
IF g_firstcall ISINITIAL.
* 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
CALLMETHOD 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.
CALLMETHOD 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
CALLMETHOD cl_gui_cfw=>dispatch.
* handle other events
CASE ok_code.
WHENtext-005. "'BACK'.
LEAVEPROGRAM.
WHENtext-006. " 'EXIT'.
LEAVEPROGRAM.
ENDCASE.
ENDMODULE. " PAI_0100 INPUT
*&---------------------------------------------------------------------**& Form create_chart*&---------------------------------------------------------------------*FORM create_chart USING l_html TYPE w3htmltabtype l_real.
DATA:
igs_chart TYPEREFTO 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 TYPEi,
l_content_type TYPE w3param-cont_type,
l_content_subtype TYPE w3param-cont_type,
l_wc_count TYPEI.
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.
DESCRIBETABLE g_t_final LINES l_wc_count.* Change size if more than 6 WC and Landscape ModeIF l_wc_count > 6AND P_Mode = TEXT-027.* set picture size
igs_chart->width = TEXT-028. "1300.
igs_chart->height = text-008. "480.ENDIF.
LOOPAT 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.
LOOPAT 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.
LOOPAT 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 SEPARATEDBY space.
igs_chart->title = l_title.
* create picture
CALLMETHOD 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 ISINITIALAND l_real NE space.
SPLIT l_content_type AT'/'INTO l_content_type l_content_subtype. "
CALLMETHOD 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.
APPENDLINESOF 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