Available in the Full Version

Pivot View - Overview

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.

The igPivotView is a two-panel control that combines a pivot grid and a data selector separated with a splitter. The view is a composite of three individual components: igPivotGrid, igPivotDataSelector, and igSplitter assembled together to provide in one place as needed tools for manipulating multidimensional (OLAP data) in a pivot grid. See the complete list of samples in the menu.

Code View

Copy to Clipboard 
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]"
    }
});