Available in the Full Version
Pivot View - TypeScript
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
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
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.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/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.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
});
});