cancel
Showing results for 
Search instead for 
Did you mean: 

How to add a chart (line chart) in crm WebUI?

anirkarmakar
Participant
0 Kudos

Hi Gurus,

My requirement is to display data in form of charts in CRM WebUI.

I have a DB table & I want to show its data (not in tabular manner), but in graphical way through line charts.

I wanna display the chart in an assignment block in 'Account Overview' page.

I do not have an idea, how can a chart can be displayed on CRM WebUI & how to feed relevant data to the chart.

Pls help in this regard.

Thanks.

Accepted Solutions (1)

Accepted Solutions (1)

former_member182350
Active Contributor
0 Kudos

Hi Anirban,

Please use below htmlb code at view layout.

1. Define page attribute as

lt_dataTYPEIGS_DATA_TAB

2. Insert below code at .htm page

<%@page language="abap" %>

<%@extension name="htmlb" prefix="htmlb" %>

<%@extension name="graphics" prefix="graphics" %>

<%@extension name="htmlb" prefix="abap" %>

<htmlb:content design="classic+design2002+design2003+design2008" controlRendering="sap"

                rtlAutoSwitch    = "true">

   <htmlb:page title = "BSP Extension: HTMLB / Element: Chart">

     <htmlb:form>

       <htmlb:chart

         id                   = "LineChart1"

         data                 = "<%=lt_data%>"

         width                = "300"

         height               = "300"

         titleCategories      = "Company"

         titleValues          = "Turnover"

         title                = "Washers by Companies!"

         chartType            = "LINES"

         legendPosition       = "EAST"

         colorOrder           = "STRAIGHT"

       />

     </htmlb:form>

   </htmlb:page>

</htmlb:content>

3. Populate data to lt_data table before call of htmlb code( "OnInitialization" event of page) as - below

DATA: line TYPE igs_data.

   line-groupid = 'SAP AG'.

   line-x = '1st Quarter'.

   line-y = 50.

   line-color = 48.

   line-extension = 'href="http://www.sap.com" alt="SAP AG"'.

   append line to data.

   line-x = '2nd Quarter'.

   line-y = 35.

   line-color = 0.

   append line to data.

   line-x = '3rd Quarter'.

   line-y = 43.

   append line to data.

   line-groupid = 'Microsoft'.

   line-x = '1st Quarter'.

   line-y = 46.

   line-extension = 'href="http://www.microsoft.com" alt="Microsoft"'.

   append line to data.

   line-x = '2nd Quarter'.

   line-y = 26.

   line-color = 64.

   append line to data.

   line-x = '3rd Quarter'.

   line-y = 38.

   line-color = 0.

   append line to data.

Hope this will solve your problem.

Ref: Also suggested by Andrei play with chart type attribute e.g. LINES, LINES_3D, BARS, BARS_3D, PIE.

http://help.sap.com/javadocs/nw04/current/hb/com/sapportals/htmlb/enum/ChartType.html

Let me know if anything.

Regards,
Arjun

Message was edited by: Andrei Vishnevsky

Reason: Please avoid asking for points. Thank you.

anirkarmakar
Participant
0 Kudos

Hi Arjun,

System is throwing short dump for the above code saying below 2 error:

1. <htmlb:content> can not be used twice.

2. <htmlb:form> can not be nested.

I checkd for solution of those two errors, but could not find nething fruitful.

If I remove those two tags, the graph is appearing.

Could you pls guide further.

Thanks.

former_member182350
Active Contributor
0 Kudos

Hi Anirban,

Check <htmlb:content> is used twice. Can you give details of .htm page code  so that i can review?

Please remove or comment all other code from insert code suggested in earlier reply, It should work.

Let me know if anything.

Regards,

Arjun

anirkarmakar
Participant
0 Kudos

Hi Arjun,

This is what I wrote in the .htm page :

<%@page language="abap" %>
<%@extension name="thtmlb" prefix="thtmlb" %>
<%@extension name="chtmlb" prefix="chtmlb" %>
<%@extension name="bsp" prefix="bsp" %>

<%--Displaying Line Graph--%>
<%@page language="abap" %>
<%@extension name="htmlb" prefix="htmlb" %>
<%@extension name="graphics" prefix="graphics" %>
<%@extension name="htmlb" prefix="abap" %>


<%

   line-groupid = 'SAP AG'.

   line-x = '1st Quarter'.
   line-y = 50.
   line-color = 48.
   line-extension = 'href="http://www.sap.com" alt="SAP AG"'.
   append line to lt_data.


   line-x = '2nd Quarter'.
   line-y = 35.
   line-color = 0.
   append line to lt_data.


   line-x = '3rd Quarter'.
   line-y = 43.
   append line to lt_data.


   line-groupid = 'Microsoft'.
   line-x = '1st Quarter'.
   line-y = 46.
   line-extension = 'href="http://www.microsoft.com" alt="Microsoft"'.
   append line to lt_data.


   line-x = '2nd Quarter'.
   line-y = 26.
   line-color = 64.
   append line to lt_data.


   line-x = '3rd Quarter'.
   line-y = 38.
   line-color = 0.
   append line to lt_data.


%>


<htmlb:content  design="classic+design2002+design2003+design2008"
                controlRendering="sap"
                rtlAutoSwitch    = "true">
<htmlb:page title = "BSP Extension: HTMLB / Element: Chart">
     <htmlb:form>
       <htmlb:chart
         id                   = "LineChart1"
         data                 = "<%=lt_data%>"
         width                = "300"
         height               = "300"
         titleCategories      = "Company"
         titleValues          = "Turnover"
         title                = "Washers by Companies!"
         chartType            = "LINES"
         legendPosition       = "EAST"
         colorOrder           = "STRAIGHT"
         />
</htmlb:form>

</htmlb:page>
</htmlb:content>

Answers (1)

Answers (1)

former_member182350
Active Contributor
0 Kudos

Hey Anirban,

Please refer to standard PPM_CHARTS component (Pipeline Performance Management) for the design and coding etc

anirkarmakar
Participant
0 Kudos

Hi Arjun,

Thanks for the response.

But could you ple explain a bit in details or give some document reference so that I can proceed.

I could not find much about PPM_CHARTS.

Thnaks.

former_member182350
Active Contributor
0 Kudos

Hi Anirban,

Greetings! You can achieve your requirement by adding below htmlb code tag to ".htm" page.

<%@page language="abap" %>

<%@extension name="thtmlb" prefix="thtmlb" %>

<%@extension name="chtmlb" prefix="chtmlb" %>

<%@extension name="bsp" prefix="bsp" %>

<%@extension name="graphics" prefix="graphics" %>

<%@extension name   = "htmlb" prefix = "abap" %>

<%data: model_sample_data type ref to CL_GRAPH_TEST_MODEL.

   create object model_sample_data. %>

<graphics:chart igs_rfc_destination="IGS_RFC_DEST" width="500">

   <graphics:data model="<%=model_sample_data%>"/>

   <graphics:custom model="<%=model_sample_data%>"/>

</graphics:chart>

Where in you need to define model class with interface IF_GRAPH_CUSTOM_MODEL & IF_GRAPH_DATA_MODEL, Write code in GET_DATA_XML &GET_CUSTOM_XML methods ( refer CL_GRAPH_TEST_MODEL class ).

Hope this might be helpful.

Let me know if anything.

Regards,
Arjun

cl_graph_test_model_utf8.

cl_graph_test_model_utf8.

anirkarmakar
Participant
0 Kudos

Thanks Arjun for the response.

Could you pls let me know, if any config is required as prequisite to it (because using class 'CL_GRAPH_TEST_MODEL' is giving shrt dump).

Besides, how to feed the data to the graph.

I have checked  CL_GRAPH_TEST_MODEL class, but any sample code for implementing those 2 methods from your will be very helpful for my understanding.

Best Regards,

Anirban

former_member182350
Active Contributor
0 Kudos

There is no extra configuration required. Can you post little more short dump details? Or Check package SBSPEXT_GRAPHICS exists in your system

Method: IF_GRAPH_DATA_MODEL~GET_DATA_XML - Sample code of CL_GRAPH_TEST_MODEL

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 'Category 1' to l_category_data_tab.

   append 'Category 2' to l_category_data_tab.

   append 'Category 3' to l_category_data_tab.

   append 'Category 4' to l_category_data_tab.

   append 'Category 5' to l_category_data_tab.

* fill data for series 1

   l_series_1_data-tooltip = 'This is Series 1'.

   l_series_1_data-label = 'Series 1'.

   l_point_data-tooltip = 'This is Point 1 of Series 1'.

   l_point_data-value = '42'.

   append l_point_data to l_series_1_data-point_data.

   l_point_data-tooltip = 'This is Point 2 of Series 1'.

   l_point_data-value = '84'.

   append l_point_data to l_series_1_data-point_data.

   l_point_data-tooltip = 'This is Point 3 of Series 1'.

   l_point_data-value = '21'.

   append l_point_data to l_series_1_data-point_data.

   l_point_data-tooltip = 'This is Point 4 of Series 1'.

   l_point_data-value = '23'.

   append l_point_data to l_series_1_data-point_data.

   l_point_data-tooltip = 'This is Point 5 of Series 1'.

   l_point_data-value = '5'.

   append l_point_data to l_series_1_data-point_data.

* fill data for series 2

   l_series_2_data-tooltip = 'This is Series 2'.

   l_series_2_data-label = 'Series 2'.

   l_point_data-tooltip = 'This is Point 1 of Series 2'.

   l_point_data-value = '10'.

   append l_point_data to l_series_2_data-point_data.

   l_point_data-tooltip = 'This is Point 2 of Series 2'.

   l_point_data-value = '10'.

   append l_point_data to l_series_2_data-point_data.

   l_point_data-tooltip = 'This is Point 3 of Series 2'.

   l_point_data-value = '33'.

   append l_point_data to l_series_2_data-point_data.

   l_point_data-tooltip = 'This is Point 4 of Series 2'.

   l_point_data-value = '8'.

   append l_point_data to l_series_2_data-point_data.

   l_point_data-tooltip = 'This is Point 5 of Series 2'.

   l_point_data-value = '50'.

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

* create series 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.

   l_ostream = l_ixml_sf->create_ostream_xstring( xml ).

   l_document->render( ostream = l_ostream ).

Method IF_GRAPH_CUSTOM_MODEL~GET_CUSTOM_XML

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_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 = 'SAPChartCustomizing' ).

   l_root_element->set_attribute( name = 'version' value = '1.0' ).

   l_document->append_child( new_child = l_root_element ).

   l_global_settings_element = l_document->create_simple_element( parent = l_root_element  name = 'GlobalSettings' ).

   l_defaults_element = l_document->create_simple_element( parent = l_global_settings_element  name = 'Defaults' ).

   l_font_family_element = l_document->create_simple_element( parent = l_defaults_element  name = 'FontFamily' value = 'Arial Unicode MS').

   l_elements_element = l_document->create_simple_element( parent = l_root_element  name = 'Elements' ).

   l_chart_elements_element = l_document->create_simple_element( parent = l_elements_element  name = 'ChartElements' ).

   l_colour_element = l_document->create_simple_element( parent = l_chart_elements_element  name = 'Color' ).

   l_background_element = l_document->create_simple_element( parent = l_colour_element  name = 'Background' value = 'RGB(0,247,231)').

   l_title_element = l_document->create_simple_element( parent = l_chart_elements_element  name = 'Title' ).

   l_caption_element = l_document->create_simple_element( parent = l_title_element  name = 'Caption' value = 'ÄÜÖ A model title').

   l_ostream = l_ixml_sf->create_ostream_xstring( xml ).

   l_document->render( ostream = l_ostream ).

.

anirkarmakar
Participant
0 Kudos

Hi Arjun,

It is now working.

But, it is bar chart. But I wanted a Line Graph.

Could you pls help.

Thanks.

VishnAndr
Active Contributor
0 Kudos

Hello, Anirban.

I think you should play with charttype attribute of graphics:chart tag. I didn't manage to find correct values for this attribute, but didn't spend much time there.