Hello,
yes, you are trying to address a single value with your binding, I understand. But your binding syntax is wrong. How should the logic know which value you wanna use if maybe several ones are in the array?
Following one further (not optimized) example with the xsjs call via jQuery.ajax:
<!DOCTYPE HTML><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="/sap/ui5/1/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> sap.ui.getCore().attachInit(buildPage); function buildPage() { $.ajax({ url : "../services/create_sum_in_json.xsjs", type : "GET", dataType : "json", success : function(serviceData){ createBulletChart(serviceData); }, error : function(oError){ document.write(JSON.stringify(oError)); } }); } function createBulletChart(actualData) { var oConfBCData = { thresholds: [ { value: 0, color: sap.suite.ui.commons.InfoTileValueColor.Good }, { value: 5, color: sap.suite.ui.commons.InfoTileValueColor.Good }, { value: 10, color: sap.suite.ui.commons.InfoTileValueColor.Good }, { value: 15, color: sap.suite.ui.commons.InfoTileValueColor.Good }, { value: 20, color: sap.suite.ui.commons.InfoTileValueColor.Error }, { value: 25, 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: actualData.records[0].value, color: sap.suite.ui.commons.InfoTileValueColor.Error }, targetValue: 12.5, thresholds: { template: oBCDataTmpl, path: "/thresholds" }, showActualValue: true, showTargetValue: true, showDeltaValue: true, showValueMarker: false }); oBCTmpl.setModel(oConfModel); oBCTmpl.placeAt("content"); } </script> </head> <body class="sapUiBody"> <div id="content"></div> </body> </html>
Consider, I have adjusted the xsjs service name and the thresholds for my needs. You have to adjust the values for your example.
Best Regards,
Florian