Skip to Content

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

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>
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

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

    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');
    
    
    Add comment
    10|10000 characters needed characters exceeded