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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
37 | |
10 | |
5 | |
4 | |
4 | |
3 | |
3 | |
3 | |
2 | |
2 |