Hello Namita,
here a working example of your coding with a hard-coded actual value:
<html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <title>Bullet Chart Example</title> <script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.m, sap.suite.ui.commons" data-sap-ui-theme="sap_bluecrystal"> </script> <script> var oConfBCData = { thresholds: [ { value: 0, color: sap.suite.ui.commons.InfoTileValueColor.Good }, { value: 15000, color: sap.suite.ui.commons.InfoTileValueColor.Good }, { value: 30000, color: sap.suite.ui.commons.InfoTileValueColor.Good }, { value: 45000, color: sap.suite.ui.commons.InfoTileValueColor.Good }, { value: 60000, color: sap.suite.ui.commons.InfoTileValueColor.Error }, { value: 75000, color: sap.suite.ui.commons.InfoTileValueColor.Error } ] }; var oConfModel = new sap.ui.model.json.JSONModel(); oConfModel.setData(oConfBCData); var oBCDataTmpl = new sap.suite.ui.commons.BulletChartData({ value: "{value}", color: "{color}" }); var oBCTmpl = new sap.suite.ui.commons.BulletChart({ size: sap.suite.ui.commons.InfoTileSize.Auto, scale: "INR", actual: { value: 20000, color: sap.suite.ui.commons.InfoTileValueColor.Error }, targetValue: 32500, thresholds: { template: oBCDataTmpl, path: "/thresholds" }, showActualValue: true, showTargetValue: true, showDeltaValue: true, showValueMarker: false, mode: sap.suite.ui.commons.BulletChartMode.Actual }); oBCTmpl.setModel(oConfModel); oBCTmpl.placeAt("content"); </script> </head> <body class="sapUiBody"> <div id="content"></div> </body></html>Problems of your coding:
- You try to "load" the data via the total.xsjs service directly in the JSONModel constructor. That is not possible. You have to execute a jQuery.ajax for the xsjs service and handle the response.
- For the bullet chart you try to bind array values (records/value). The actual aggregation is a 0..1 aggregation which needs a single structured value. So within the success function of the jQuery.ajax call for the total.xsjs service you have to create that value which you then can pass to the actual aggregation.
Helpful links for you maybe:
- SAPUI5 Explored - BulletChart Samples
- SAPUI5 Explored - BulletChart Aggregations
- http://api.jquery.com/jquery.ajax/
Best Regards,
Florian
