Skip to Content
Author's profile photo srinivas karri

Analysis chats in crm by using htmlb:charts

This is all about my requirement.

I wondered how can I implement analysis chats without bi/bo integration.  Even I didn’t till I got this kind of requirement.

Usually  SAP CRM Analytics provides business users with access to unified information  for confident decision making

and alignment across people and teams.

If they want to know there company profit, product costs, campaign costs, lead etc.. For that this analysis chats procedure

is helpful we can implement analysis chats in sap crm itself.

I will give a brief about my requirement.

Sales executives will create leads, opportunities, quotations, sales orders based on that I want to know how many leads,

opportunities..etc they are created in particular span of time. This details i need to display like graphical charts.

This is one kind of score card.


This is standard analysis chart.

Same as this i need to display Sales Executive analysis chart.

If you observe the above chart table data is displayed when you click on business role home screen.

Based on the table data chart data will vary.

Now coming to my requirement how can we implement like that.

first of all we have to think about how to display data dynamically when we open any business role home screen.

Like this.


Step 1. I will give you a brief idea about how to display data dynamically when we log in into web ui

In my requirement I have created one custom model. model code i have attached below.

If you want to fetch your own data then you have to Create custom model otherwise you can use standard model like ONEORDER,BP,BP_APPL etc..

Custom model creation.

I created a custom GenIL object model to fetch the data based on search object.

Then I going to create bsp component and I am using this genil component into my component.

Step 2. Creating bsp component.

  •      Open a Transaction BSP_WD_CMPWB.
  • Enter Component name as ZSALESX_GRAPH and click on create.


  • once bsp component is created then click on display
  • Go to runtime Repository Editor Right Click on Model -> Add Model

model add.JPG

  • Add Component Set name as  ZSALES_GRAPH which you had created while creating Genil Model.


  • You can see the Component Structure Browser , expanding Model will show your

        Root Object Customer , Key Structure , Attribute Structure.Step 3.

  • Now we have to write the code in DO_INIT_INITIALIZATION or  DO_PREPARE_OUT method.
  • Before that we have to declare static variable in table view implementation class because that variable holds the count of

        individual fields like opportuntity,lead,quotation,fallowup…etc.

  • I will use this fields in GRAPH method.


  • Now we will write the code in  do_init_initialization or do_prepare_output Because when ever I login into my home screen
  • I need to display last three months data. So Redefine the method Do_Prepare_Output .
  • Write the logic.


  • i have added this code in below attachments.

Step 4 .

  • Here i have created one method which is like GRAPH.
  • In This graph method I have implemented logic to display graph values.
  • Procedure Go to implementation class..


  • Create one method graph.


  • Here We have a structure like igs_data,igs_data_tab this structure holds graphical data in run time.
  • These are the fields which is there in that structure.


  • we may confuse what is groupid,x,y,z..etc use to suggest. Here i have given the technical details of each field.
Technical Name Explanation resemble
groupid Name of the data series. The chart element can display several datasets at the same time, thus enabling production statistics of different plants to be compared, for example. Every dataset must be given a unique name.
x Column with the x values or categories
y Column with the y values
z Column with optional z values
color Alternative color. By default, the chart element represents the categories that were selected from a series of predefined color schemes in different colors.
extension Alternative extension.
datalabel Alternative label for the data
  • double click on the method GRAPH write the logic here.
  • i have attached graph logic below attachment.

Step 5.

  • Right now we have a Sales Executive data but how to display that data into graphical format.
  • In .HTM there is a Tag htmlb:charts. by using this tag we can display our data into analysis format.
  • Go to .HTM page. Here there is standard table code already exists.
  • Click on Edit button. Below after table code write the logic like this.

id                  = “AREA_3D”
data                = “<%= controller->gv_data %>”   ” this will give you the graph data what we are getting from the do_perpare_output.
width               = “500”
height              = “200”
              titleCategories     =
“Process Types”
              titleValues         =
“No Of Records”
title               = “Sales Report”
              chartType           =
              visible             =
              displayObjectValues =
              legendPosition      =
              colorOrder          =

this is the final output in the home screen.


thanks Arjun Pawar

after searching of all i got your answer based on this blog i implemented this requirement.

How to add a chart (line chart) in crm WebUI?

With the same way the charts we can develop by using interfaces like IF_GRAPH_DATA_MODEL and IF_GRAPH_CUSTOM_MODEL Go through this link Designing Graphical Charts using class part-2

Thanks & Regards,


Assigned Tags

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

      Hey Srinivas, very good article...thanks for sharing.

      Author's profile photo srinivas karri
      srinivas karri
      Blog Post Author

      Thanks Arjun.

      Author's profile photo zafar karnalkar
      zafar karnalkar

      Hi Srinivas,

          Nice document.. 🙂

      Author's profile photo srinivas karri
      srinivas karri
      Blog Post Author

      Thanks Zafar Karnalkar.

      Author's profile photo Former Member
      Former Member

      Thanks for sharing Srinivas, Very Informative... 🙂

      Author's profile photo Govind Krishna Kumar Thiagarajan
      Govind Krishna Kumar Thiagarajan

      Hi Srinivas, Nice and useful article...I have a requirement to display a sample pie can I achieve this?

      Any info on this would be appreciated.



      Author's profile photo srinivas karri
      srinivas karri
      Blog Post Author

      Hi Govind,

      have you seen this link just go through this..

      instead of chartType   = "LINES"  use chart type "PIE"

      Thanks & Regards,


      Author's profile photo Former Member
      Former Member

      Hi Srinivas ,

      Please suggest how did we displayed our component ZSALESX_GRAPH  on home page ?

      Author's profile photo srinivas karri
      srinivas karri
      Blog Post Author

      Hi abhinav,

      first you have to add your component into component interface under runtime repostory.

      then go to spro->crm->ui framework->ui framework definition->define add views for home pages and work cneter pages.

      In the last step you have to add your new interface view to the  configuration of the welcome page. if you want to add your view under 'salespro' home screen go the component "WCC_SCL_HOME".

      go through this link..

      Re: How to embed 3 custom views into the home workarea in web ui?

      Thanks & Regards,