Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
harikrishna_malladi
Active Participant

Requirement: In an organization To differentiate the business partners based on country, this  count of business Partner details i need to display like graphical charts.


Creation Web UI Component Using the Transaction BSP_WD_CMPWB enter component Name (e.gZHK_GRAPH3) in field component and click on create .

Enter the description and window name (e.g. Mainwindow) and click on continue.Choose a Package and click on continue and provide workbench request.

In the component structure browser, right click on view and choose create. A wizard will be displayed Enter the following data in wizard


View Name -   Main

View Type  -    Empty View


Do not change on following screen and finish the wizard. Your component will looks as given  below



Double click on MAIN view. In right hand side, double click on main.htm to maintain the graph data. For this write the given code.


Create the page attributes as following screenshot


Add the following code in layout tab :


<%@page language="abap" %>

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

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

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



<%

data: line type igs_data.


line-x        = 'Business Partner'.
line-y        = 1900.
line-color    = 9.
line-groupid  = 'Business Partner Count'.
append line to lt_data1.


line-x        = 'Within INDIA'.
line-y        = 1100.
line-color    = 17.
line-groupid  = 'INDIA Count'.
append line to lt_data1.


line-x        = 'Within USA'.
line-y        = 8000.
line-color    = 25.
line-groupid  = 'USA Count'.
append line to lt_data1.

%>


<htmlb:page title = "Business Partner Details/ Element: Chart" marginTop ="100">


<htmlb:chart
id                   = "LineChart1"
data                 = "<%=lt_data1%>"
width                = "1000"
height               = "300"
title                = "Business Partner Details"
chartType            = "COLUMNS"
legendPosition       = "SOUTH"
colorOrder           = "STRAIGHT" />

</htmlb:page>

</body>


Save, check and activate the component.Go to Runtime Repository Editor, Add view to the window and Don't forget to check and save it. Otherwise 'Runtime repository Editor' will not get updated with latest changes.and then execute the application.

The final output  would be displayed as shown below.


Thanks & Regards,

Harikrishna Malladi.

3 Comments
Labels in this area