Available in the Full Version

Pivot Grid - Flat Data Binding

This sample demonstrates how to bind the igPivotGrid to an igOlapFlatDataSource using an igPivotDataSelector for data selection.
    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>

    <!-- 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>
    <style>
        #dataSelector, #pivotGrid {
            float: left;
        }
    </style>
</head>
<body>
    <script>
        $(function () {
            var dataSource = 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]"
            });

            $('#dataSelector').igPivotDataSelector({
                dataSource: dataSource,
                height: "580px",
                width: "230px"
            });

            $("#pivotGrid").igPivotGrid({
                dataSource: dataSource,
                height: "580px",
                width: "580px"
            });
        });
    </script>
    <div class="sampleContent">
        <div id="dataSelector"></div>
        <div id="pivotGrid"></div>
    </div>
</body>
</html>