Available in the Full Version

Pivot View - TypeScript

Drop Filter Fields Here
Units Sold	Product
Date	All Products

All Periods	2127

Sales

Filters	Columns
	Product
Rows
Date	Units Sold

Defer Update

This sample is designed for a larger screen size.

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

This sample demonstrates how to use TypeScript to create igPivotView and how to assign the data using the class-based approach.

Code View

Copy to Clipboard

HTML
TypeScript

<!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>
    <div id="pivotView"></div>
    <script src="/TypeScriptSamples/pivot-view/typescript.js"></script>
</body>
</html>

/// <reference path="/js/typings/jquery.d.ts" />
/// <reference path="/js/typings/jqueryui.d.ts" />
/// <reference path="/js/typings/igniteui.d.ts" />

class SelectorProduct3 {
    ProductCategory: string;
    SellerName: string;
    Country: string;
    City: string;
    Date: string;
    UnitPrice: number;
    UnitsSold: number;
    constructor(public category, public sellerName, public country, public city,
        public date, public unitPrice, public unitsSold) {
        this.ProductCategory = category;
        this.SellerName = sellerName;
        this.Country = country;
        this.City = city;
        this.Date = date;
        this.UnitPrice = unitPrice;
        this.UnitsSold = unitsSold;
    }
}


var dataView: SelectorProduct3[] = [];
dataView.push(new SelectorProduct3("Clothing", "Stanley Brooker", "Bulgaria", "Plovdiv", "01/01/2012", 12.81, 282));
dataView.push(new SelectorProduct3("Clothing", "Elisa Longbottom", "US", "New York", "01/05/2013", 49.57, 296));
dataView.push(new SelectorProduct3("Bikes", "Lydia Burson", "Uruguay", "Ciudad de la Costa", "01/06/2011", 3.56, 68));
dataView.push(new SelectorProduct3("Accessories", "David Haley", "UK", "London", "04/07/2012", 85.58, 293));
dataView.push(new SelectorProduct3("Components", "John Smith", "Japan", "Yokohama", "12/08/2012", 18.13, 240));
dataView.push(new SelectorProduct3("Clothing", "Larry Lieb", "Uruguay", "Ciudad de la Costa", "05/12/2011", 68.33, 456));
dataView.push(new SelectorProduct3("Components", "Walter Pang", "Bulgaria", "Sofia", "02/19/2013", 16.05, 492));

function saleValueCalculator(items, cellMetadata) {
        var sum = 0;
        $.each(items, function (index, item) {
            sum += item.UnitPrice * item.UnitsSold;
        });
        return (Math.round(sum * 10) / 10).toFixed(2);
};

dataSource = new $.ig.OlapFlatDataSource({
    dataSource: dataView,
    metadata: {
        cube: {
            name: "Sales",
            caption: "Sales",
            measuresDimension: {
                caption: "Measures",
                measures: [ //for each measure, name and aggregator are required
                    {
                        caption: "Units Sold", name: "UnitsSold",
                        aggregator: $.ig.OlapUtilities.prototype.sumAggregator('UnitsSold')
                    },
                    {
                        caption: "Unit Price", name: "UnitPrice",
                        aggregator: $.ig.OlapUtilities.prototype.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; }
                            }]
                    }]
                }]
        }
    },

    rows: "[Date].[Dates]",
    columns: "[Product].[Product]",
    measures: "[Measures].[UnitsSold]"
});

$(function () {
    $("#pivotView").igPivotView({
        dataSource: dataSource
    });
});

Ignite UI for jQuery | Samples

Search Results

Pivot View - TypeScript

Code View