Data rollup video

[mseverin]

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.

[JoelHaggar]

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>

[mseverin]

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?

[mseverin]

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