In my previous tutorial http://scn.sap.com/docs/DOC-56357
I have shown how to display data in a graphical format by using html code ( htmlb:charts tag ).
In this tutorial I am going to show how to display data in a graphical format by using class.
Many times a graphical chart output is required by the clients since a graph is much more appealing to the user and enables a better analysis of data.
However it is quite simple to provide the functionality for building graphical charts using interface methods in sap crm.
In crm there is a tag graphics by using this we can display our data in a graphical format.
There is an interface called IF_GRAPH_DATA_MODEL and IF_GRAPH_CUSTOM_MODEL whose methods are used for displaying our own data and designing our own graphs. However, most of the basic graph requirements can be achieved by using the above interface methods and graphics tag in .htm.
It's very easy to use this interfaces in our class and they need input in the form of XML files.
Prerequisites for designing graphics using this interfaces..
1) We have to create one class example ZCL_CRM_GRAPH_CHARTS.
2) Go to interface tab provide the interfaces which is like IF_GRAPH_DATA_MODEL and IF_GRAPH_CUSTOM_MODEL.
3) Go to methods tab double click on that method in GET_DATA_XML and GET_CUSTOM_XML. Implement your own logic.
Data_xml is used for convert our DATA into xml format that will be used to display graphic format
Where as custom_xml is used for providing CHART PROPETIES which is like ‘bar,line,coloum,pie etc…, 3D or 2D, font, title, caption etc…
4) Go to your BSP_WD_CMPWB provide your component name, in which view you want to provide graphics go to that view.htm create one instance of the graph class.
5) There is a tag graphics:chart use this graph tag.
Designing sample graph using this procedure..
Suppose you want to draw a line chart showing the revenue from a department over a few years. These are the sample values which I have taken for drawing the chart.
Years | Revinue |
2008 | 40000 |
2009 | 60000 |
2010 | 100000 |
2011 | 500000 |
2012 | 400000 |
2013 | 2000000 |
2014 | 40000000 |
Creating new class ex: zcl_crm_graph_chart as well as provide the interface and implement the methods.
Go to methods tab..
Implement the method get_data_xml..
This method is to display your own data in to categorize and series wise..
TYPES: BEGIN OF t_point_data,
tooltip TYPE string,
value TYPE string,
END OF t_point_data.
TYPES: t_point_data_tab TYPE STANDARD TABLE OF t_point_data.
DATA: BEGIN OF t_series_data,
tooltip TYPE string,
label TYPE string,
point_data TYPE t_point_data_tab,
END OF t_series_data.
DATA: l_ixml TYPE REF TO if_ixml,
l_ixml_sf TYPE REF TO if_ixml_stream_factory,
l_istream TYPE REF TO if_ixml_istream,
l_ostream TYPE REF TO if_ixml_ostream,
l_document TYPE REF TO if_ixml_document,
l_parser TYPE REF TO if_ixml_parser,
l_root_element TYPE REF TO if_ixml_element,
l_categories_element TYPE REF TO if_ixml_element,
l_series_1_element TYPE REF TO if_ixml_element,
l_series_2_element TYPE REF TO if_ixml_element,
l_c_element TYPE REF TO if_ixml_element,
l_s_element TYPE REF TO if_ixml_element,
l_series_1_data LIKE t_series_data,
l_series_2_data LIKE t_series_data,
l_point_data TYPE t_point_data,
l_category_name TYPE string,
l_category_data_tab TYPE STANDARD TABLE OF string,
l_tooltip TYPE string,
l_apostrophe TYPE string VALUE ''''.
* fill category data
APPEND '2008' TO l_category_data_tab.
APPEND '2009' TO l_category_data_tab.
APPEND '2010' TO l_category_data_tab.
APPEND '2011' TO l_category_data_tab.
APPEND '2012' TO l_category_data_tab.
APPEND '2013' TO l_category_data_tab.
APPEND '2014' TO l_category_data_tab.
* fill data for line graph
l_series_1_data-tooltip = 'revinue'. " this the lable for the below lable
l_series_1_data-label = 'Revinue'. " this the lable that will be displayed on the bottom on the chart..
l_point_data-tooltip = '3000'. " this will display as a tool tip when we place the cursor on the pointed line graph..
l_point_data-value = '3000'. " this is the actul value what will be displayed on the plot..
APPEND l_point_data TO l_series_1_data-point_data.
CLEAR :l_point_data.
l_point_data-tooltip = '60000'.
l_point_data-value = '60000'.
APPEND l_point_data TO l_series_1_data-point_data.
CLEAR : l_point_data.
l_point_data-tooltip = '100000'.
l_point_data-value = '100000'.
APPEND l_point_data TO l_series_1_data-point_data.
CLEAR : l_point_data.
l_point_data-tooltip = '500000'.
l_point_data-value = '500000'.
APPEND l_point_data TO l_series_1_data-point_data.
CLEAR : l_point_data.
l_point_data-tooltip = '400000'.
l_point_data-value = '400000'.
APPEND l_point_data TO l_series_1_data-point_data.
CLEAR : l_point_data.
l_point_data-tooltip = '2000000'.
l_point_data-value = '2000000'.
APPEND l_point_data TO l_series_1_data-point_data.
CLEAR : l_point_data.
l_point_data-tooltip = '40000000'.
l_point_data-value = '40000000'.
APPEND l_point_data TO l_series_1_data-point_data.
CLEAR : l_point_data.
l_ixml = cl_ixml=>create( ).
l_ixml_sf = l_ixml->create_stream_factory( ).
l_document = l_ixml->create_document( ).
l_root_element = l_document->create_element( name = 'SimpleChartData' ).
l_root_element->set_attribute( name = 'version' value = '1.0' ).
l_document->append_child( new_child = l_root_element ).
* create category xml
l_categories_element = l_document->create_simple_element( parent = l_root_element name = 'Categories' ).
LOOP AT l_category_data_tab INTO l_category_name.
l_c_element = l_document->create_simple_element( parent = l_categories_element name = 'C' value = l_category_name ).
ENDLOOP.
* create series 1 xml
l_series_1_element = l_document->create_simple_element( parent = l_root_element name = 'Series' ).
l_tooltip = 'title='.
CONCATENATE l_tooltip l_apostrophe l_series_1_data-tooltip l_apostrophe INTO l_tooltip.
l_series_1_element->set_attribute( name = 'extension' value = l_tooltip ).
l_series_1_element->set_attribute( name = 'label' value = l_series_1_data-label ).
LOOP AT l_series_1_data-point_data INTO l_point_data.
l_s_element = l_document->create_simple_element( parent = l_series_1_element name = 'S' value = l_point_data-value ).
l_tooltip = 'title='.
CONCATENATE l_tooltip l_apostrophe l_point_data-tooltip l_apostrophe INTO l_tooltip.
l_s_element->set_attribute( name = 'extension' value = l_tooltip ).
ENDLOOP.
l_ostream = l_ixml_sf->create_ostream_xstring( xml ).
l_document->render( ostream = l_ostream ).
After setting up the data we need to pass the customizing data to the chart. Customizing data consists of various parameters which decide the look and feel of your chart.
Go to GET_CUSTOM_XML method.
Implement the logic like this…
DATA: l_ixml TYPE REF TO if_ixml,
l_ixml_sf TYPE REF TO if_ixml_stream_factory,
l_istream TYPE REF TO if_ixml_istream,
l_ostream TYPE REF TO if_ixml_ostream,
l_document TYPE REF TO if_ixml_document,
l_parser TYPE REF TO if_ixml_parser,
l_root_element TYPE REF TO if_ixml_element,
l_global_settings_element TYPE REF TO if_ixml_element,
l_defaults_element TYPE REF TO if_ixml_element,
l_font_family_element TYPE REF TO if_ixml_element,
l_elements_element TYPE REF TO if_ixml_element,
l_chart_elements_element TYPE REF TO if_ixml_element,
l_colour_element TYPE REF TO if_ixml_element,
l_background_element TYPE REF TO if_ixml_element,
l_title_element TYPE REF TO if_ixml_element,
l_caption_element TYPE REF TO if_ixml_element,
l_encoding TYPE REF TO if_ixml_encoding.
l_ixml = cl_ixml=>create( ).
l_ixml_sf = l_ixml->create_stream_factory( ).
l_document = l_ixml->create_document( ).
l_encoding = l_ixml->create_encoding( byte_order = if_ixml_encoding=>co_little_endian character_set = 'utf-8' ).
l_document->set_encoding( l_encoding ).
l_root_element = l_document->create_simple_element( name = 'SAPChartCustomizing' parent = l_document ).
l_root_element->set_attribute( name = 'version' value = '1.1' ).
l_global_settings_element = l_document->create_simple_element( name = 'GlobalSettings' parent = l_root_element ).
l_elements_element = l_document->create_simple_element( name = 'FileType' parent = l_global_settings_element ).
l_elements_element->if_ixml_node~set_value( 'PNG' ).
* Here you can give the Chart Type i.e. 2D, 3D etc
l_elements_element = l_document->create_simple_element( name = 'Dimension' parent = l_global_settings_element ).
* For 2 Dimensional Graph write - PseudoTwo
* For 2 Dimensional Graph write - PseudoThree
* l_elements_element->if_ixml_node~set_value( 'PseudoThree' ).
* Here you can give the chart type
l_elements_element = l_document->create_simple_element( name = 'ChartType' parent = l_global_settings_element ).
* For Bar Char write - Columns
* For Pie Chart write - Pie etc
l_elements_element->if_ixml_node~set_value( 'Lines' ).
l_elements_element = l_document->create_simple_element( name = 'FontFamily' parent = l_defaults_element ).
l_elements_element->if_ixml_node~set_value( 'Arial' ).
l_elements_element = l_document->create_simple_element( name = 'Elements' parent = l_root_element ).
l_chart_elements_element = l_document->create_simple_element( name = 'ChartElements' parent = l_elements_element ).
l_title_element = l_document->create_simple_element( name = 'Title' parent = l_chart_elements_element ).
* Give the desired caption for the chart here
l_elements_element = l_document->create_simple_element( name = 'Caption' parent = l_title_element ).
l_elements_element->if_ixml_node~set_value( 'Revinue per year' ).
l_ostream = l_ixml_sf->create_ostream_xstring( xml ).
l_document->render( ostream = l_ostream ).
And then go to bsp_wd_cmpwb create one component name. create one empty view.
Go to .htm page declare like this.. create instance for the class which we have created earlier.
<%
data : lv_testgraph type ref to ZCL_CRM_GRAPH_CHART,
CREATE OBJECT lv_testgraph .
%>
<graphics:chart igs_rfc_destination = "IGS_RFC_DEST"
width = "400" >
<graphics:data model="<%= lv_testgraph %>" />
<graphics:custom model="<%= lv_testgraph %>" />
</graphics:chart>
now test the component.
This is the exact output you will get..
Multiple Line Charts.
Now suppose you want to compare the revenues of two different departments. You need a line chart, one for each department. To achieve this simply insert one more series value into the GET_DATA_XML method.
TYPES: BEGIN OF t_point_data,
tooltip TYPE string,
value TYPE string,
END OF t_point_data.
TYPES: t_point_data_tab TYPE STANDARD TABLE OF t_point_data.
DATA: BEGIN OF t_series_data,
tooltip TYPE string,
label TYPE string,
point_data TYPE t_point_data_tab,
END OF t_series_data.
DATA: l_ixml TYPE REF TO if_ixml,
l_ixml_sf TYPE REF TO if_ixml_stream_factory,
l_istream TYPE REF TO if_ixml_istream,
l_ostream TYPE REF TO if_ixml_ostream,
l_document TYPE REF TO if_ixml_document,
l_parser TYPE REF TO if_ixml_parser,
l_root_element TYPE REF TO if_ixml_element,
l_categories_element TYPE REF TO if_ixml_element,
l_series_1_element TYPE REF TO if_ixml_element,
l_series_2_element TYPE REF TO if_ixml_element,
l_c_element TYPE REF TO if_ixml_element,
l_s_element TYPE REF TO if_ixml_element,
l_series_1_data LIKE t_series_data,
l_series_2_data LIKE t_series_data,
l_point_data TYPE t_point_data,
l_category_name TYPE string,
l_category_data_tab TYPE STANDARD TABLE OF string,
l_tooltip TYPE string,
l_apostrophe TYPE string VALUE ''''.
* fill category data
APPEND '2008' TO l_category_data_tab.
APPEND '2009' TO l_category_data_tab.
APPEND '2010' TO l_category_data_tab.
APPEND '2011' TO l_category_data_tab.
APPEND '2012' TO l_category_data_tab.
APPEND '2013' TO l_category_data_tab.
APPEND '2014' TO l_category_data_tab.
* fill data for Department 1
l_series_1_data-tooltip = 'revinue'. " this the lable for the below lable
l_series_1_data-label = 'Department1'. " this the lable that will be displayed ont he bottem on the chart..
l_point_data-tooltip = '3000'. " this will display as a tool tip when we place the curser on the pointed line graph..
l_point_data-value = '3000'. " this is the actule value what will be displayed on the plot..
APPEND l_point_data TO l_series_1_data-point_data.
CLEAR :l_point_data.
l_point_data-tooltip = '60000'.
l_point_data-value = '60000'.
APPEND l_point_data TO l_series_1_data-point_data.
CLEAR : l_point_data.
l_point_data-tooltip = '100000'.
l_point_data-value = '100000'.
APPEND l_point_data TO l_series_1_data-point_data.
CLEAR : l_point_data.
l_point_data-tooltip = '500000'.
l_point_data-value = '500000'.
APPEND l_point_data TO l_series_1_data-point_data.
CLEAR : l_point_data.
l_point_data-tooltip = '400000'.
l_point_data-value = '400000'.
APPEND l_point_data TO l_series_1_data-point_data.
CLEAR : l_point_data.
l_point_data-tooltip = '200000'.
l_point_data-value = '200000'.
APPEND l_point_data TO l_series_1_data-point_data.
CLEAR : l_point_data.
l_point_data-tooltip = '40000'.
l_point_data-value = '40000'.
APPEND l_point_data TO l_series_1_data-point_data.
CLEAR : l_point_data.
* fill data for Department 2
l_series_2_data-tooltip = 'Revinue'.
l_series_2_data-label = 'Department2'.
l_point_data-tooltip = '450000'.
l_point_data-value = '4500000'.
APPEND l_point_data TO l_series_2_data-point_data.
l_point_data-tooltip = '54780'.
l_point_data-value = '54780'.
APPEND l_point_data TO l_series_2_data-point_data.
l_point_data-tooltip = '98010'.
l_point_data-value = '98010'.
APPEND l_point_data TO l_series_2_data-point_data.
l_point_data-tooltip = '239020'.
l_point_data-value = '2390020'.
APPEND l_point_data TO l_series_2_data-point_data.
l_point_data-tooltip = '4500400'.
l_point_data-value = '4500400'.
APPEND l_point_data TO l_series_2_data-point_data.
l_ixml = cl_ixml=>create( ).
l_ixml_sf = l_ixml->create_stream_factory( ).
l_document = l_ixml->create_document( ).
l_root_element = l_document->create_element( name = 'SimpleChartData' ).
l_root_element->set_attribute( name = 'version' value = '1.0' ).
l_document->append_child( new_child = l_root_element ).
* create category xml
l_categories_element = l_document->create_simple_element( parent = l_root_element name = 'Categories' ).
LOOP AT l_category_data_tab INTO l_category_name.
l_c_element = l_document->create_simple_element( parent = l_categories_element name = 'C' value = l_category_name ).
ENDLOOP.
* create Department 1 xml
l_series_1_element = l_document->create_simple_element( parent = l_root_element name = 'Series' ).
l_tooltip = 'title='.
CONCATENATE l_tooltip l_apostrophe l_series_1_data-tooltip l_apostrophe INTO l_tooltip.
l_series_1_element->set_attribute( name = 'extension' value = l_tooltip ).
l_series_1_element->set_attribute( name = 'label' value = l_series_1_data-label ).
LOOP AT l_series_1_data-point_data INTO l_point_data.
l_s_element = l_document->create_simple_element( parent = l_series_1_element name = 'S' value = l_point_data-value ).
l_tooltip = 'title='.
CONCATENATE l_tooltip l_apostrophe l_point_data-tooltip l_apostrophe INTO l_tooltip.
l_s_element->set_attribute( name = 'extension' value = l_tooltip ).
ENDLOOP.
** create Department 2 xml
l_series_2_element = l_document->create_simple_element( parent = l_root_element name = 'Series' ).
l_tooltip = 'title='.
CONCATENATE l_tooltip l_apostrophe l_series_2_data-tooltip l_apostrophe INTO l_tooltip.
l_series_2_element->set_attribute( name = 'extension' value = l_tooltip ).
l_series_2_element->set_attribute( name = 'label' value = l_series_2_data-label ).
LOOP AT l_series_2_data-point_data INTO l_point_data.
l_s_element = l_document->create_simple_element( parent = l_series_2_element name = 'S' value = l_point_data-value ).
l_tooltip = 'title='.
CONCATENATE l_tooltip l_apostrophe l_point_data-tooltip l_apostrophe INTO l_tooltip.
l_s_element->set_attribute( name = 'extension' value = l_tooltip ).
ENDLOOP.
**** passing our xml data to document...
l_ostream = l_ixml_sf->create_ostream_xstring( xml ).
l_document->render( ostream = l_ostream ).
This is what exact output along with tool tip.
Now we have to work on display part means chart property's.
Vertical Bar Chart
To view the same comparison in bar charts, just change the element value of the chat type in get_custom_xml method..
You will get the output like this..
Horizontal bar chart.
You have to pass the chart element is Bars.
l_elements_element = l_document->create_simple_element( name = 'ChartType' parent = l_global_settings_element ).
* For Bar Char write - Columns
* For Pie Chart write - Pie etc
l_elements_element->if_ixml_node~set_value( 'Bars' ).
Now displaying graphs in 3D.
To view the 3D charts, just change the element value of the chat type in get_custom_xml method..
By default system will take 2D.
* Here you can give the Chart Type i.e. 2D, 3D etc
l_elements_element = l_document->create_simple_element( name = 'Dimension' parent = l_global_settings_element ).
* For 2 Dimensional Graph write - PseudoTwo
* For 2 Dimensional Graph write - PseudoThree
l_elements_element->if_ixml_node~set_value( 'PseudoThree' ).
This is the exact output..
To change the color of the plotarea.
This we can achieve by using graphics:plotarea.
Go to .htm of your view and then provide like this..
<%
data : lv_graphic type ref to ZCL_CRM_GRAPH_CHART.
CREATE OBJECT lv_graphic.
%>
<graphics:chart igs_rfc_destination = "IGS_RFC_DEST"
width = "550" >
<graphics:plotarea color="BLUE" />
<graphics:custom model="<%= LV_GRAPHIC %>" />
<graphics:data model="<%= LV_GRAPHIC %>" />
</graphics:chart>
To Change the background color of the chart.
If you want to change the background color of the chart there is tag which is like
graphics:background.
This is the exact output.
To Change the title and color.
By using graphics:title tag we can change the color,title and size of the graph.
<%
data : lv_graphic type ref to ZCL_CRM_GRAPH_CHART.
CREATE OBJECT lv_graphic.
%>
<graphics:chart igs_rfc_destination = "IGS_RFC_DEST"
width = "550" >
<graphics:plotarea color="BLUE" />
<%-- <graphics:background color="RED" />--%>
<graphics:title color = "BLUE"
size = "0.8" />
<graphics:custom model="<%= lv_graphic %>" />
<graphics:data model="<%= lv_graphic %>" />
</graphics:chart>
I hope that makes drawing graphs using class and graphics tag complete and easily achievable.
You can now confidently implement the graphic in sap crm web ui.
Enjoying drawing graphs in crm web ui.
Thanks & Regards,
Srinivas.
- SAP Managed Tags:
7 Comments
