Available in the Full Version

Pivot View - Flat Data Binding

This sample demonstrates how to bind the igPivotView to an igOlapFlatDataSource.

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>

    <!-- 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>

    <!-- 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>
</head>
<body>
    <script>
        $(function () {
            var sumAggregator = function (propertyName) {
                return function (items, cellMetadata) {
                    var sum = 0;
                    $.each(items, function (index, item) {
                        sum += item[propertyName];
                    });
                    return sum;
                };
            },
            saleValueCalculator = function (items, cellMetadata) {
                var sum = 0;
                $.each(items, function (index, item) {
                    sum += item.UnitPrice * item.UnitsSold;
                });
                return (Math.round(sum * 10) / 10).toFixed(2);
            };
            $("#pivotView").igPivotView({
                dataSourceOptions: {
                    flatDataOptions: {
                        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", aggregator: sumAggregator('UnitsSold') },
                                        { caption: "Unit Price", name: "UnitPrice", aggregator: sumAggregator('UnitPrice') },
                                        { caption: "Sale Value", name: "SaleValue", aggregator: saleValueCalculator }]
                                },
                                dimensions: [ // for each dimension
                                    {
                                        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)
                                        ]
                                    },
                                    {
                                        caption: "Location", name: "Location", hierarchies: [{
                                            caption: "Location", name: "Location", levels: [
                                                {
                                                    name: "AllLocations", caption: "All Locations",
                                                    memberProvider: function (item) { return "All Locations"; }
                                                },
                                                {
                                                    name: "Country", caption: "Country",
                                                    memberProvider: function (item) { return item.Country; }
                                                },
                                                {
                                                    name: "City", caption: "City",
                                                    memberProvider: function (item) { return item.City; }
                                                }]
                                        }]
                                    },
                                    {
                                        caption: "Product", name: "Product", hierarchies: [{
                                            caption: "Product", name: "Product", levels: [
                                                {
                                                    name: "AllProducts", caption: "All Products",
                                                    memberProvider: function (item) { return "All Products"; }
                                                },
                                                {
                                                    name: "ProductCategory", caption: "Category",
                                                    memberProvider: function (item) { return item.ProductCategory; }
                                                }]
                                        }]
                                    },
                                    {
                                        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; }
                                                }]
                                        }]
                                    }]
                            }
                        }
                    },
                    // Preload hiearhies for the rows, columns, filters and measures
                    rows: "[Date].[Dates]",
                    columns: "[Product].[Product]",
                    measures: "[Measures].[UnitsSold]"//,[Measures].[UnitPrice]"
                }
            });
        });
    </script>

    <div id="pivotView"></div>
</body>
</html>