Skip to Content
Author's profile photo HariKrishna Malladi

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.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo srinivas karri
      srinivas karri

      Hi Harikrishna,

      i have already posted same kind of document earlier

      Analysis chats in crm by using htmlb:charts

      anyway good but before posting any document please check weather there is any other documents related to your presentation.



      Author's profile photo Qazi Wasif Ali
      Qazi Wasif Ali

      Hi dear.


      Thanks a lot for sharing the document. I wanted to add few fields before the display of this graph. I wanted to use those fields as like selection criteria of a report. Please guide me that how I can achieve this.

      Author's profile photo Former Member
      Former Member

      Hi HariKrishna...

      Good Info..Could you please tell me how to create pie chart with htmlb in page layout.