on 10-28-2013 6:41 AM
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.
Hi Anirban,
Please use below htmlb code at view layout.
1. Define page attribute as
lt_data | TYPE | IGS_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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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.
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>
Hey Anirban,
Please refer to standard PPM_CHARTS component (Pipeline Performance Management) for the design and coding etc
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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.
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
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 ).
.
User | Count |
---|---|
8 | |
1 | |
1 | |
1 | |
1 | |
1 | |
1 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.