Available in the Full Version

Pivot Grid - Flat Data with AngularJS

This sample demonstrates how AngularJS directives are used with the Pivot Grid Control and Olap Flat Data Source.
    Drop Filter Fields Here
  • Units Sold
  • Seller
  • Date
All Sellers
All Periods2127

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('pivotGridController', function ($scope) {
        $scope.pivotData = new $.ig.OlapFlatDataSource({
            dataSource:
            [{ "ProductCategory": "Clothing", "UnitPrice": 12.81, "SellerName": "Stanley Brooker", "Country": "Bulgaria", "City": "Plovdiv", "Date": "01/01/2012", "UnitsSold": 282 },
            { "ProductCategory": "Clothing", "UnitPrice": 49.57, "SellerName": "Elisa Longbottom", "Country": "US", "City": "New York", "Date": "01/05/2013", "UnitsSold": 296 },
            { "ProductCategory": "Bikes", "UnitPrice": 3.56, "SellerName": "Lydia Burson", "Country": "Uruguay", "City": "Ciudad de la Costa", "Date": "01/06/2011", "UnitsSold": 68 },
            { "ProductCategory": "Accessories", "UnitPrice": 85.58, "SellerName": "David Haley", "Country": "UK", "City": "London", "Date": "04/07/2012", "UnitsSold": 293 },
            { "ProductCategory": "Components", "UnitPrice": 18.13, "SellerName": "John Smith", "Country": "Japan", "City": "Yokohama", "Date": "12/08/2012", "UnitsSold": 240 },
            { "ProductCategory": "Clothing", "UnitPrice": 68.33, "SellerName": "Larry Lieb", "Country": "Uruguay", "City": "Ciudad de la Costa", "Date": "05/12/2011", "UnitsSold": 456 },
            { "ProductCategory": "Components", "UnitPrice": 16.05, "SellerName": "Walter Pang", "Country": "Bulgaria", "City": "Sofia", "Date": "02/19/2013", "UnitsSold": 492 }],
            metadata: {
                cube: {
                    name: "Sales",
                    caption: "Sales",
                    measuresDimension: {
                        caption: "Measures",
                        measures: [ //for each measure, name and aggregator are required
                            {
                                caption: "Units Sold", name: "UnitsSold",
                                // returns a function that will be used as sum aggregator on the 'UnitsSold property' of the data objects
                                aggregator: $.ig.OlapUtilities.prototype.sumAggregator('UnitsSold')
                            }]
                    },
                    dimensions: [ // for each dimension name and hierarchies are required
                        {
                            caption: "Seller", name: "Seller", hierarchies: [{
                                caption: "Seller", name: "Seller", levels: [
                                    {
                                        name: "AllSellers", caption: "All Sellers",
                                        memberProvider: function (item) { return "All Sellers"; }
                                    },
                                    {
                                        name: "SellerName", caption: "Seller",
                                        memberProvider: function (item) { return item.SellerName; }
                                    }]
                            }]
                        },
                        {
                            caption: "Date", name: "Date", /*displayFolder: "Folder1\\Folder2",*/ hierarchies: [
                                $.ig.OlapUtilities.prototype.getDateHierarchy(
                                    "Date", // the source property name
                                    ["year", "quarter", "month", "date"], // the date parts for which levels will be generated (optional)
                                    "Dates", // The name for the hierarchy (optional)
                                    "Date", // The caption for the hierarchy (optional)
                                    ["Year", "Quarter", "Month", "Day"], // the captions for the levels (optional)
                                    "All Periods") // the root level caption (optional)
                            ]
                        }
                    ]
                }
            },
            // Preload hierarchies for the rows, columns, filters and measures
            rows: "[Date].[Dates]",
            columns: "[Seller].[Seller]",
            measures: "[Measures].[UnitsSold]"
        });
    });
    </script>

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

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