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.



class.JPG

Go to methods tab..


methods.JPG



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_datapoint_data.
CLEAR :l_point_data.
l_point_data
tooltip = ‘60000’.
l_point_data
value = ‘60000’.
APPEND l_point_data TO l_series_1_datapoint_data.
CLEAR : l_point_data.
l_point_data
tooltip = ‘100000’.
l_point_data
value = ‘100000’.
APPEND l_point_data TO l_series_1_datapoint_data.
CLEAR : l_point_data.
l_point_data
tooltip = ‘500000’.
l_point_data
value = ‘500000’.
APPEND l_point_data TO l_series_1_datapoint_data.
CLEAR : l_point_data.
l_point_data
tooltip = ‘400000’.
l_point_data
value = ‘400000’.
APPEND l_point_data TO l_series_1_datapoint_data.
CLEAR : l_point_data.
l_point_data
tooltip = ‘2000000’.
l_point_data
value = ‘2000000’.
APPEND l_point_data TO l_series_1_datapoint_data.
CLEAR : l_point_data.
l_point_data
tooltip = ‘40000000’.
l_point_data
value = ‘40000000’.
APPEND l_point_data TO l_series_1_datapoint_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_datatooltip 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_datalabel ).
LOOP AT l_series_1_datapoint_data INTO l_point_data.
l_s_element
= l_document->create_simple_element( parent = l_series_1_element  name = ‘S’ value = l_point_datavalue ).
l_tooltip
= ‘title=’.
CONCATENATE l_tooltip l_apostrophe l_point_datatooltip 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.


chat types.JPG


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_datapoint_data.
CLEAR :l_point_data.
l_point_data
tooltip = ‘60000’.
l_point_data
value = ‘60000’.
APPEND l_point_data TO l_series_1_datapoint_data.
CLEAR : l_point_data.
l_point_data
tooltip = ‘100000’.
l_point_data
value = ‘100000’.
APPEND l_point_data TO l_series_1_datapoint_data.
CLEAR : l_point_data.
l_point_data
tooltip = ‘500000’.
l_point_data
value = ‘500000’.
APPEND l_point_data TO l_series_1_datapoint_data.
CLEAR : l_point_data.
l_point_data
tooltip = ‘400000’.
l_point_data
value = ‘400000’.
APPEND l_point_data TO l_series_1_datapoint_data.
CLEAR : l_point_data.
l_point_data
tooltip = ‘200000’.
l_point_data
value = ‘200000’.
APPEND l_point_data TO l_series_1_datapoint_data.
CLEAR : l_point_data.
l_point_data
tooltip = ‘40000’.
l_point_data
value = ‘40000’.
APPEND l_point_data TO l_series_1_datapoint_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_datapoint_data.
l_point_data
tooltip = ‘54780’.
l_point_data
value = ‘54780’.
APPEND l_point_data TO l_series_2_datapoint_data.
l_point_data
tooltip = ‘98010’.
l_point_data
value = ‘98010’.
APPEND l_point_data TO l_series_2_datapoint_data.
l_point_data
tooltip = ‘239020’.
l_point_data
value = ‘2390020’.
APPEND l_point_data TO l_series_2_datapoint_data.
l_point_data
tooltip = ‘4500400’.
l_point_data
value = ‘4500400’.
APPEND l_point_data TO l_series_2_datapoint_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_datatooltip 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_datalabel ).
LOOP AT l_series_1_datapoint_data INTO l_point_data.
l_s_element
= l_document->create_simple_element( parent = l_series_1_element  name = ‘S’ value = l_point_datavalue ).
l_tooltip
= ‘title=’.
CONCATENATE l_tooltip l_apostrophe l_point_datatooltip 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_datatooltip 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_datalabel ).
LOOP AT l_series_2_datapoint_data INTO l_point_data.
l_s_element
= l_document->create_simple_element( parent = l_series_2_element  name = ‘S’ value = l_point_datavalue ).
l_tooltip
= ‘title=’.
CONCATENATE l_tooltip l_apostrophe l_point_datatooltip 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.



2lines.JPG


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



barcode.JPG


You will get the output like this..


barchart.JPG


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’
).


vertical.JPG


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


3dbar.JPG


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>


ploatarea.JPG


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.

bgcode.JPG

This is the exact output.


bgcolor.JPG


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>

title.JPG

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.

To report this post you need to login first.

3 Comments

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

Leave a Reply