Available in the Full Version
Pivot View - Overview
This sample demonstrates how to bind the igPivotView to an igOlapFlatDataSource.
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.
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]"
}
});
<div id="pivotView"></div>
<!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>
<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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="/igniteui/css/structure/infragistics.css" rel="stylesheet" />
<!-- 1. Load libraries -->
<script src="/js/modernizr.min.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-ui.min.js"></script>
<!-- ReactJS library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="/igniteui/js/infragistics.core.js"></script>
<script src="/igniteui/js/infragistics.lob.js"></script>
<script src="/js-data/nw-products"></script>
<!-- Ignite UI for jQuery ReactJS Files -->
<script src="https://unpkg.com/igniteui-react@1.0.1/igniteui-react.js"></script>
</head>
<body>
<div id="app">
<!--Sample JSON Data-->
<script src="/js-data/northwind"></script>
<script type="text/babel">
var App = React.createClass({
render: 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);
};
return <IgPivotView id="pivotView"
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]"
}} />
}
});
ReactDOM.render(
<App />,
document.getElementById("app"));
</script>
</div>
</body>
</html>