如何在SAP WebClient UI里使用jChartFX-阿里云开发者社区

开发者社区> 开发者小助手-bz4> 正文

如何在SAP WebClient UI里使用jChartFX

简介: 如何在SAP WebClient UI里使用jChartFX
+关注继续查看

In my blog CRM One Order statistic tool I develop a small tool to print out the statistics of number of assigned line item for all business documents in the system.


The tool has the following three sections of output in SAPGUI.


This section means there are 1 order which has 5000 line items, 1 order has 2000 items, 1 order has 1998 items …



image.pngAccordingly, this section below means Sales Organization 50000732 has been used in 38746 Business document, Organization 50001194 used in 1346 Business document.



image.pngAnd this is for Service Organization unit.


image.pngIn this blog, I will introduce how to display the output in browser instead, using a chart library jChartFX.


You can refer to final achievement below:



image.pngHere below is detail step to build this tool.

Step1. Create a new BSP application in SE80, and create a new page index.htm.


Paste the following source code to index.htm:



<%@page language="abap" %>

<!DOCTYPE html>

<html>

<head>

   <script src="jchartlib/js/jquery1.7.1.js" >

   </script>

   <script src="jchartlib/chartUtil.js" >

   </script>

   <script src="jchartlib/js/jchartfx.system.js">

   </script>

   <script src="jchartlib/js/jchartfx.coreVector.js">

   </script>

   <script src="jchartlib/js/jchartfx.coreVector3D.js">

   </script>

   <script src="jchartlib/js/jchartfx.advanced.js">

   </script>

   <script src="jchartlib/js/jchartfx.gauge.js">

   </script>

    <script>

       function initialize() {

           initChart("divChart1", "Order's item number overview",

           <%= zcl_crm_order_statistic=>get_item_json( ) %>);

           initChart("divChart2", "Sales Org usage overview",

           <%= zcl_crm_order_statistic=>get_sales_json( ) %>);

           initChart("divChart3", "Service Order usage overview",

           <%= zcl_crm_order_statistic=>get_service_json( ) %>);

       }

   </script>

        <link rel="stylesheet" type="text/css" href="jchartlib/styles/Attributes/jchartfx.attributes.aurora.css" />

   <link rel="stylesheet" type="text/css" href="jchartlib/styles/Palettes/jchartfx.palette.aurora.css" />

    <style type="text/css">

       .jchartfx .AxisY_Text {

           fill: #FEFEFE;

   }

   .jchartfx .AxisX_Text {

       fill: #FEFEFE;

   }

   .jchartfx .Title {

       fill: #FEFEFE;

   }

   .jchartfx .LegendItem {

       fill: #FEFEFE;

   }

   </style>

}

</head>

<body class="jchartfx_body">

 <div class="jchartfx_container">

   <div id="divChart1" style="width:90%;height:270px;display:inline-block;position:absolute;left:0px;top:0px"></div>

   <div id="divChart2" style="width:90%;height:270px;display:inline-block;position:absolute;left:0px;top:280px"></div>

   <div id="divChart3" style="width:90%;height:270px;display:inline-block;position:absolute;left:0px;top:570px"></div>

   <script language="javascript">

       $(document).ready(function ($) {

           initialize();

       });

   </script>

   </div>

</div>

</body>

</html>Step2. Switch to MIME Repository in SE80, create a new folder for this BSP application:image.pngAnd import the following js and css file into the BSP application.image.pngStep3. Add the following one line in OnCreate event handler of this BSP application.

image.pngThe tool basically scan the CRM business document header table CRMD_ORDERADM_H and item table CRMD_ORDERADM_I and HR table hrp1000 to calculate the result.


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9715 0
小白Pycharm使用(1):你一定要知道的PyCharm快捷键
python开发新手工具网盘地址 下载链接:http://pan.baidu.com/s/1eS8WMR4 密码:7eso pycharm中文版包网盘地址 下载链接:http://pan.baidu.com/s/1dEVkPtn 密码:mzet pycharm注册码 http://idea.qinxi1992.cn PyCharm是由JetBrains打造的一款Python IDE。
1635 0
TeeChart使用范例
在窗体上加入TeeChart控件,并通过属性加入4个TLineSeries,分别命名为Series1,Series2,Series3,Series4,并添加一按钮Button1,其Click事件为: procedure TForm1.
627 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
10864 0
使用 PyCharm 添加 Django 项目
一、前置准备(PyCharm与Python的下载,已有的跳过)   1.首先下载PyCharm 地址:http://www.jetbrains.com/pycharm/   2.然后下载Python 地址:https://www.
1136 0
如何在 SAP Spartacus 自定义 UI 里使用标准 UI 的上下文数据 - let 关键字的用法
如何在 SAP Spartacus 自定义 UI 里使用标准 UI 的上下文数据 - let 关键字的用法
7 0
解决vue中使用echarts,大量数据缩放卡顿的问题
问题 在echarts官网的demo中,k线图的缩放是很流畅的,但是在项目中实现之后,缩放时分的卡,有时间根本缩放不动 最开始想的是可能是数据量太大了,然后将api返回的数据进行了打印,发现数据不到300条,所以和数据量没有关系。
6245 0
React中使用Echarts实现数据可视化的小案例(基础文章)
React中使用Echarts实现数据可视化的小案例(基础文章)
10 0
在pycharm中使用git版本管理以及同步github
注意:首先你电脑必须安装git版本控制器(软件),在官网下载即可。 pycharm中使用git以及github很简单,首先在设置中搜索github: 点击右边的Create API Token,系统会要求输入你的github账号和密码,当你输入正确点击确认后会进行身份认证,认证成功后会创建一段TOKEN。
1271 0
2315
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载