Skip to Content

Step by step to Create Column Chart in Sap CRM Webclient ui

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.

linex        = ‘Business Partner’.
liney        = 1900.
linecolor    = 9.
linegroupid  = ‘Business Partner Count’.
append line to lt_data1.

linex        = ‘Within INDIA’.
liney        = 1100.
linecolor    = 17.
linegroupid  = ‘INDIA Count’.
append line to lt_data1.

linex        = ‘Within USA’.
liney        = 8000.
linecolor    = 25.
linegroupid  = ‘USA Count’.
append line to lt_data1.


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

id                   = “LineChart1”
data                 = “<%=lt_data1%>”
width                = “1000”
height               = “300”
title                = “Business Partner Details”
chartType            = “COLUMNS”
legendPosition       = “SOUTH”
colorOrder           = “STRAIGHT” />



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 Logged on to comment or reply to a post.