1. 首页
  2. IT资讯

如何在SAP WebClient UI里创建柱状图(bar chart)

Recently I am asked by my manager to give him a report containing the number of open, in process and closed tickets assigned to my responsible component. Since I am learning Javascript recently, I decide not to achieve the report via excel but choose Javascript instead.
Here below is the Bar chart created via a third party Javascript library jChartFX.
You can download the library and example from this link.

如何在SAP WebClient UI里创建柱状图(bar chart)

You can follow this document to create Bar Chart and embed it in your CRM system.

(1) Upload necessary Javascript file and css file into mime repository

Although there are lots of js and css file in the downloaded library, in this sample only 8 of them are needed:

如何在SAP WebClient UI里创建柱状图(bar chart)

You can find all of them from attached file, just rename JChartLib.zip.txt as JChartLib.zip and unzip it.

Go to SE80 mime repository, follow the path “/bc/bsp/sap/crm_ui_frame” to find folder “CRM_UI_FRAME”. Create a folder “jchart” under it via context menu Create->Folder:

如何在SAP WebClient UI里创建柱状图(bar chart)

Then click on folder jchart and choose “Create->MIME Object” from context menu, maintain Mime Type as “application/x-javascript” and click Start Editor button:

如何在SAP WebClient UI里创建柱状图(bar chart)

The notepad application is automatically launched, and just copy the source code of JavaScript file from the zip file of this document.

Repeat the operation ans ensure all the 8 files are created in mime repository correctly. ( The mime type for css file is “text/css”) Once done, it looks like below:

如何在SAP WebClient UI里创建柱状图(bar chart)

(2) Create a new UI component and draw Bar Chart there

copy the source code of file main.html from attachment into the empty view you just created in UI component:

如何在SAP WebClient UI里创建柱状图(bar chart)

A brief explanation on the source code of main.html

  • line18: create a new chart instance
  • line19: position the chart into html element with ID = divChart1
  • line20: set chart type as Bar
  • line21: feed the chart with JSON data
  • line22: enable 3D effect to make the chart look more fancy
  • line23~25: set title

如何在SAP WebClient UI里创建柱状图(bar chart)

line28~line73: hard code the JSON data stream for chart
line81~line112: since I am not happy with the default color defined in css file, so I redefine them here.
So far, the development of webclient UI component is finished.

(3) Create a new work center and put the UI component into it

Please find step by step about how to achieve it from this link.
Feel free to adapt the source code of this sample to meet with your own requirement.

Update on 2017-05-27

The same step could be performed to integrate other third party JavaScript libraries to WebClient UI framework, see another example from this blog Display count down in WebClient UI.

要获取更多Jerry的原创文章,请关注公众号”汪子熙”:
如何在SAP WebClient UI里创建柱状图(bar chart)

本文来自投稿,不代表程序员编程网立场,如若转载,请注明出处:http://www.cxybcw.com/203107.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code