Please Note This forum exists for community support for the Mango product family and the Radix IoT Platform. Although Radix IoT employees participate in this forum from time to time, there is no guarantee of a response to anything posted here, nor can Radix IoT, LLC guarantee the accuracy of any information expressed or conveyed. Specific project questions from customers with active support contracts are asked to send requests to support@radixiot.com.

Radix IoT Website Mango 3 Documentation Website Mango 4 Documentation Website

how-to Render bar-display class chart inside ng-repeat


  • I am trying to render a repeated horizontal barchart inside an ng-repeat. I tried this inside a <tr ng-repeat with limited success. The barchart will render and correctly display the text point.names in each chart but the convertedValue and renderedValue as well as the point's value return nothing when inside the ng-repeat. Outside the ng-repeat its a different story the charts render perfectly. My problem is there are hundreds of points I want to render so ng-repeat="point in mypoints" ... is the eloquent solution.
    If someone could explain why I can only see the point's name inside an ng-repeat but not the point's value?
    I also use <ma-get-point-value point="mypoint"> successfully outside the ng-repeat but putting it inside the ng-repeat breaks the rendering and not even the point.names render,


  • progress update.. I've figured enough out to get values rendering now however on update interval the ng-repeat portion gets wiped clean.. Anyone have an ideas on what's happening ? code below:

    <ma-point-query query="{$and: true, deviceName:dvName, name: 'W-LITERS-PER-MIN'}" limit="144" points="wpoints"></ma-point-query>          
      <ma-point-values points="wpoints" values="combined" from="from" to="to" rollup="AVERAGE" rollup-interval="1 minutes">
        </ma-point-values>    
    
      <center><b><h3>Active Units Using Cold & Hot Potable Water</h3></b></center>
      <md-table-container ng-init="page.tableOrder='deviceName'">
        <table md-table="">
          <thead md-head="" md-order="page.tableOrder">
            <tr>
            <th md-column=""></th>
              <!--<th md-column="" md-order-by="deviceName">Hot Water by Unit</th>-->
              </tr>
          </thead>
          <tbody md-body="" ng-init="test = true">
            <tr ng-repeat="wpoint in wpoints | orderBy: tableOrder">
                
                <td ng-repeat="value in combined">
                           <span ng-if= "value['value_' + wpoint.xid] !== 0">
                                    <div class="bar-display" ng-class="{'point-disabled': !wpoint.enabled}">
                                      <div class="bar-display-fill" ng-style="{width: value['value_' + wpoint.xid] / max * 100 + '%'}" style=""></div>
                                      <div class="bar-display-text">{{wpoint.name}} :  {{value['value_' + wpoint.xid]}}</div>
                                    </div> 
                                </span>
                        </td>
                        </tr>
          </tbody>
        </table>
      </md-table-container>