Skip to Content

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

Hi Gurus,

My requirement is to display data in form of charts in CRM WebUI.

I have a DB table & I want to show its data (not in tabular manner), but in graphical way through line charts.

I wanna display the chart in an assignment block in 'Account Overview' page.

I do not have an idea, how can a chart can be displayed on CRM WebUI & how to feed relevant data to the chart.

Pls help in this regard.

Thanks.

Add a comment
10|10000 characters needed characters exceeded

Related questions

2 Answers

  • Best Answer
    Posted on Oct 29, 2013 at 01:44 PM

    Hi Anirban,

    Please use below htmlb code at view layout.

    1. Define page attribute as

    lt_data TYPE IGS_DATA_TAB

    2. Insert below code at .htm page

    <%@page language="abap" %>

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

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

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

    <htmlb:content design="classic+design2002+design2003+design2008" controlRendering="sap"

    rtlAutoSwitch = "true">

    <htmlb:page title = "BSP Extension: HTMLB / Element: Chart">

    <htmlb:form>

    <htmlb:chart

    id = "LineChart1"

    data = "<%=lt_data%>"

    width = "300"

    height = "300"

    titleCategories = "Company"

    titleValues = "Turnover"

    title = "Washers by Companies!"

    chartType = "LINES"

    legendPosition = "EAST"

    colorOrder = "STRAIGHT"

    />

    </htmlb:form>

    </htmlb:page>

    </htmlb:content>

    3. Populate data to lt_data table before call of htmlb code( "OnInitialization" event of page) as - below

    DATA: line TYPE igs_data.

    line-groupid = 'SAP AG'.

    line-x = '1st Quarter'.

    line-y = 50.

    line-color = 48.

    line-extension = 'href="http://www.sap.com" alt="SAP AG"'.

    append line to data.

    line-x = '2nd Quarter'.

    line-y = 35.

    line-color = 0.

    append line to data.

    line-x = '3rd Quarter'.

    line-y = 43.

    append line to data.

    line-groupid = 'Microsoft'.

    line-x = '1st Quarter'.

    line-y = 46.

    line-extension = 'href="http://www.microsoft.com" alt="Microsoft"'.

    append line to data.

    line-x = '2nd Quarter'.

    line-y = 26.

    line-color = 64.

    append line to data.

    line-x = '3rd Quarter'.

    line-y = 38.

    line-color = 0.

    append line to data.

    Hope this will solve your problem.

    Ref: Also suggested by Andrei play with chart type attribute e.g. LINES, LINES_3D, BARS, BARS_3D, PIE.

    http://help.sap.com/javadocs/nw04/current/hb/com/sapportals/htmlb/enum/ChartType.html

    Let me know if anything.

    Regards,
    Arjun

    Message was edited by: Andrei Vishnevsky

    Reason: Please avoid asking for points. Thank you.

    Add a comment
    10|10000 characters needed characters exceeded

    • Hi Arjun,

      This is what I wrote in the .htm page :

      <%@page language="abap" %>
      <%@extension name="thtmlb" prefix="thtmlb" %>
      <%@extension name="chtmlb" prefix="chtmlb" %>
      <%@extension name="bsp" prefix="bsp" %>

      <%--Displaying Line Graph--%>
      <%@page language="abap" %>
      <%@extension name="htmlb" prefix="htmlb" %>
      <%@extension name="graphics" prefix="graphics" %>
      <%@extension name="htmlb" prefix="abap" %>


      <%

      line-groupid = 'SAP AG'.

      line-x = '1st Quarter'.
      line-y = 50.
      line-color = 48.
      line-extension = 'href="http://www.sap.com" alt="SAP AG"'.
      append line to lt_data.


      line-x = '2nd Quarter'.
      line-y = 35.
      line-color = 0.
      append line to lt_data.


      line-x = '3rd Quarter'.
      line-y = 43.
      append line to lt_data.


      line-groupid = 'Microsoft'.
      line-x = '1st Quarter'.
      line-y = 46.
      line-extension = 'href="http://www.microsoft.com" alt="Microsoft"'.
      append line to lt_data.


      line-x = '2nd Quarter'.
      line-y = 26.
      line-color = 64.
      append line to lt_data.


      line-x = '3rd Quarter'.
      line-y = 38.
      line-color = 0.
      append line to lt_data.


      %>


      <htmlb:content design="classic+design2002+design2003+design2008"
      controlRendering="sap"
      rtlAutoSwitch = "true">
      <htmlb:page title = "BSP Extension: HTMLB / Element: Chart">
      <htmlb:form>
      <htmlb:chart
      id = "LineChart1"
      data = "<%=lt_data%>"
      width = "300"
      height = "300"
      titleCategories = "Company"
      titleValues = "Turnover"
      title = "Washers by Companies!"
      chartType = "LINES"
      legendPosition = "EAST"
      colorOrder = "STRAIGHT"
      />
      </htmlb:form>

      </htmlb:page>
      </htmlb:content>

  • Posted on Oct 28, 2013 at 09:55 AM

    Hey Anirban,

    Please refer to standard PPM_CHARTS component (Pipeline Performance Management) for the design and coding etc

    Add a comment
    10|10000 characters needed characters exceeded

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.