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

  • Hello,

    I watched the Data rollup video and it is exactly what I'd like to do.

    Is there somewhere that I can see the code behind this example? I've checked the examples in my Mango installation but don't see anything close to the Data rollup example.

    Thanks.


  • Here is the code for that Demo, hope it helps!

    <ma-watch-list-get ng-model="designer.watchList" parameters="designer.parameters" on-points-change="designer.points = $points" id="39ccc8e0-4146-4ef9-85bc-849e25a3837b" watch-list-xid="WL_5816774c-7cd8-4f48-b8e8-57212afbdf1c"></ma-watch-list-get>
    <div class="ma-designer-root" id="d04a6d69-4d96-4fa7-a8ef-6fb3188bbf21" style="width: 1355px; height: 1075px; position: relative;">
        <div layout="column" layout-gt-sm="row" layout-align="end center">
            <div layout="">
                <md-button class="md-raised md-accent md-hue-3" ng-click="dateBar.preset ='DAY_SO_FAR'">
                    TODAY
                </md-button>
                <md-button class="md-raised md-accent md-hue-3" ng-click="dateBar.preset ='MONTH_SO_FAR'">
                    THIS MONTH
                </md-button>
                <md-button class="md-raised md-accent md-hue-3" ng-click="dateBar.preset ='PREVIOUS_MONTH'">
                    LAST MONTH
                </md-button>
                <md-button class="md-raised md-accent md-hue-3" ng-click="dateBar.preset ='YEAR_SO_FAR'">
                    YEAR
                </md-button>
            </div>
        </div>
       <div layout="column" layout-gt-sm="row" layout-align="end center">
            <div layout="">
                <md-button class="md-raised md-accent md-hue-3" ng-click="dateBar.rollupType = 'POINT_DEFAULT'">
                    Default
                </md-button>
                <md-button class="md-raised md-accent md-hue-3" ng-click="dateBar.rollupType = 'NONE'">
                    None
                </md-button>
                <md-button class="md-raised md-accent md-hue-3" ng-click="dateBar.rollupType = 'AVERAGE'">
                    Average
                </md-button>
                <md-button class="md-raised md-accent md-hue-3" ng-click="dateBar.rollupType = 'MINIMUM'">
                    Min
                </md-button>
                <md-button class="md-raised md-accent md-hue-3" ng-click="dateBar.rollupType = 'MAXIMUM'">
                    Max
                </md-button>
                <md-button class="md-raised md-accent md-hue-3" ng-click="dateBar.rollupType = 'SIMPLIFY'">
                    Simplify
                </md-button>
                <md-button class="md-raised md-accent md-hue-3" ng-click="dateBar.rollupType = 'DELTA'">
                    Delta
                </md-button>
    
            </div>
        </div>
        <ma-watch-list-chart id="60c8475e-6902-48d7-9388-1639801a2889" watch-list="designer.watchList" points="designer.points" from="dateBar.from" to="dateBar.to" rollup-type="dateBar.rollupType" rollup-intervals="dateBar.rollupIntervals" rollup-interval-period="dateBar.rollupIntervalPeriod" simplify-tolerance="dateBar.simplifyTolerance" style="position: absolute; width: 1020px; height: 621px; left: 0px; top: 124px;"></ma-watch-list-chart>
        <ma-statistics-table id="513a0e40-4ef9-4c9f-8a3c-4837f1d78069" from="dateBar.from" to="dateBar.to" hide-starts-and-runtimes="false" style="position: absolute; left: 1022px; top: 185px;" point="designer.points | filter:{name:'kW'}:true | maFirst"></ma-statistics-table>
        <ma-statistics-table id="4f1ad186-7d1d-4bca-8c1f-437de73aff07" from="dateBar.from" to="dateBar.to" hide-starts-and-runtimes="false" style="position: absolute; left: 1020px; top: 615px;" point="designer.points | filter:{name:'kWh'}:true | maFirst"></ma-statistics-table>
        <div id="cf395b95-1958-4839-a020-41feecaf8c92" style="position: absolute; left: 1022px; top: 155px; width: 194.5px; height: 30px; font-weight: bold;">kW Statistics</div>
        <div id="304da59c-2fa5-4ce9-bda1-44544e66123d" style="position: absolute; left: 1020px; top: 585px; width: 194.5px; height: 30px; font-weight: bold;">kWh Statistics</div>
        <ma-statistics-table id="aa17591e-2009-49a1-a179-dd912f7f9ca3" from="dateBar.from" to="dateBar.to" hide-starts-and-runtimes="false" style="position: absolute; left: 0px; top: 825px;" point="designer.points | filter:{name:'kW Binary'}:true | maFirst"></ma-statistics-table>
        <div id="62e7026a-6ff8-447c-b481-0e99be8efdbb" style="position: absolute; left: 0px; top: 795px; width: 194.5px; height: 30px; font-weight: bold;">Statistics Above 45 kW</div>
        <ma-gauge-chart id="e0e898f5-b0e0-4bc5-a149-dd7d7b9c38de" style="position: absolute; width: 301px; height: 184px; left: 1020px; top: 385px;" point="designer.points | filter:{name:'kW'}:true | maFirst"></ma-gauge-chart>
        <ma-point-value id="19258dbd-37b9-4c85-80c8-cd09acef7dbe" enable-popup="right" style="position: absolute; left: 477px; top: 824px; width: 200.906px; height: 31px;" point="designer.points | filter:{name:'kW'}:true | maFirst" flash-on-change="true" quick-info="true" label="DEVICE_AND_NAME"></ma-point-value>
        <ma-point-value id="6572a91c-b28d-4f9e-a17e-96c8ecda6425" enable-popup="right" style="position: absolute; left: 477px; top: 857px; width: 200.891px; height: 31px;" point="designer.points | filter:{name:'kWh'}:true | maFirst" flash-on-change="true" quick-info="true" label="DEVICE_AND_NAME"></ma-point-value>
        <ma-point-value id="952cf2d1-3229-4a68-845a-3933f8864443" enable-popup="right" style="position: absolute; left: 477px; top: 890px; width: 200.891px; height: 31px;" point="designer.points | filter:{name:'kW Binary'}:true | maFirst" flash-on-change="true" quick-info="true" label="DEVICE_AND_NAME"></ma-point-value>
        <div id="a8d8584e-6613-4f6b-8bd4-041c9b318ae0" style="position: absolute; left: 477px; top: 795px; width: 194.5px; height: 30px; font-weight: bold;">Current Values</div>
    </div>
    

  • Thanks, this is a big help. I'm very new to trying to make interactive pages.

    Is there some other setup that I need to do to get the ng-click to work?


  • Is there a video that explains how it works, similar to the video for SVG graphics?