Available in the Full Version

Pivot Grid - XMLA Data with AngularJS

This sample demonstrates how AngularJS directives are used with the Pivot Grid Control and Olap Xmla Data Source.
    FiltersColumns
        Rows

            This sample is designed for a larger screen size.

            On mobile, try rotating your screen, view full size, or email to another device.

            Code View

            Copy to Clipboard 
            <!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
    <script src="/js/angular.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>

    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/extensions/igniteui-angularjs.js"></script>

    <script type="text/javascript">
        var sampleApp = angular.module('sampleApp', ['igniteui-directives']);
        sampleApp.controller('pivotGridXmlaController', function ($scope) {
            $scope.xmlaDataSource = new $.ig.OlapXmlaDataSource({
                serverUrl: 'https://sampledata.infragistics.com/olap/msmdpump.dll',
                catalog: 'Adventure Works DW Standard Edition',
                cube: 'Adventure Works',
                rows: "[Ship Date].[Calendar]",
                columns: "[Delivery Date].[Calendar]",
                measures: "[Measures].[Product Gross Profit Margin Status],[Measures].[Product Gross Profit Margin Goal]",
            });
        });
    </script>

    <style>
        #dataSelector, #pivotGrid_table_container {
            float: left;
        }

        #pivotGrid_table_container {
            width: 70%;
        }
    </style>
</head>
<body class="container">
    <div class="push-down-xl" ng-app="sampleApp" ng-controller="pivotGridXmlaController">
        <div style="float:left;width:30%;">
            <ig-pivot-data-selector id="dataSelector" data-source="xmlaDataSource" height="650px">
            </ig-pivot-data-selector>
        </div>
        <div style="float:right; width:70%;">
            <ig-pivot-grid id="pivotGrid"data-source="xmlaDataSource" height="650px">
            </ig-pivot-grid>
        </div>
    </div>
</body>   
</html>