Skip to Content
0

How to set "total" and "fraction" property for harvey ball ?

Jan 01 at 10:57 AM

49

avatar image

Hello,

I am stuck with an issue pertaining to harvey ball. The harvey ball is not rendered after passing hard coded or dynamic values. The error I get is "Cannot read property substring of undefined". Below is the code for used to get it rendered.

Case 1: I am able to bind the fraction value after giving the items property, but unable to set "total" property. The ball is rendered here, but fraction value is set for total as well.

Tried to use setTotal() but no luck. Have used expression binding but no luck again. All the values passed are parsed to float.

Case 2: Tried passing hard coded values here, but still the above mentioned error is given. The code is referenced from Sample in demo kit.

It's been a while now and help will be highly appreciated.

case 1:
<dv:HarveyBallMicroChart size="M" total="{harveyBallData>/TotalOrder}" showTotal="true" showFractions="true" id="assignedHarveyBall" items="{harveyBallData>/}">
<dv:items>								
   <dv:HarveyBallMicroChartItem fraction="{harveyBallData>Assigned}" color="Good"/>
</dv:items>
</dv:HarveyBallMicroChart>

case 2:

<dv:HarveyBallMicroChart size="M" total="100" showTotal="true" showFractions="true" id="unassignedHarveyBall">
<dv:items>
<dv:HarveyBallMicroChartItem fraction="80" color="Error" id="unassignedHarveyBallItem"/>
</dv:items>
</dv:HarveyBallMicroChart>
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

1 Answer

Best Answer
avatar image
Former Member
Jan 01 at 04:54 PM
1

Hi

there are a few things that you missed out.

1. totalScale is needed

2. I am not sure about the model data that you have so I cooked up one :-)

http://jsbin.com/lutocan/edit?html,js,output

<!DOCTYPE HTML>
<html>


  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="UTF-8">
    <title>MVC</title>
    <script id="sap-ui-bootstrap" type="text/javascript"
      src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
      data-sap-ui-theme="sap_bluecrystal"
      data-sap-ui-libs="sap.m,sap.suite.ui.microchart"
      data-sap-ui-xx-bindingSyntax="complex">
    </script>
    <!-- XML-based view definition -->
    <script id="oView" type="sapui5/xmlview">
    <mvc:View height="100%" controllerName="myView.Template"
      xmlns="sap.m"
      xmlns:core="sap.ui.core"
      xmlns:mvc="sap.ui.core.mvc"
      xmlns:dv="sap.suite.ui.microchart">
    <dv:HarveyBallMicroChart size="M"
      total="{harveyBallData>/TotalOrder}"
      totalScale=""
      showTotal="true"
      showFractions="true"
      items="{harveyBallData>/items}">
      <dv:items>								
        <dv:HarveyBallMicroChartItem
          fraction="{harveyBallData>Assigned}"
          color="Good"/>
      </dv:items>
     </dv:HarveyBallMicroChart>
     </mvc:View>
    </script>
  </head>

  <body class="sapUiBody" role="application">
    <div id="content"></div>
  </body>
</html>

sap.ui.define([
  'jquery.sap.global',
  'sap/ui/core/mvc/Controller',
  'sap/ui/model/json/JSONModel'
], function(jQuery, Controller, JSONModel) {
  "use strict";
  var oController = Controller.extend("myView.Template", {
    onInit: function(oEvent) {
      this.getView().setModel(new JSONModel({
        TotalOrder: 10,
        items: [
          {Assigned: 8}
        ]
      }), 'harveyBallData');
    }
  });
  return oController;
});

var oView = sap.ui.xmlview({
  viewContent: jQuery('#oView').html()
});

oView.placeAt('content');

Show 1 Share
10 |10000 characters needed characters left characters exceeded

Setting the totalScale="" did the trick. Thank you so much !!!

0