jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
166 lines (144 loc) • 7.91 kB
HTML
<html lang="en">
<head>
<title id='Description'>JavaScript PivotGrid - Custom Pivot Function</title>
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.light.css" type="text/css" />
<script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxpivot.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxpivotgrid.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// prepare sample data
var data = new Array();
var firstNames =
[
"Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
];
var lastNames =
[
"Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
];
var productNames =
[
"Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
];
var priceValues =
[
"2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
];
for (var i = 0; i < 500; i++) {
var row = {};
var productindex = Math.floor(Math.random() * productNames.length);
var price = parseFloat(priceValues[productindex]);
var quantity = 1 + Math.round(Math.random() * 10);
row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
row["productname"] = productNames[productindex];
row["price"] = price;
row["quantity"] = quantity;
row["total"] = price * quantity;
data[i] = row;
}
// create a data source and data adapter
var source =
{
localdata: data,
datatype: "array",
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' }
]
};
var dataAdapter = new $.jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
var pivotDataSource = new $.jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
var mean = 0;
for (var i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
var ssum = 0;
for (var i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
var variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname' }, { dataField: 'lastname'}],
columns: [{ dataField: 'productname'}],
filters: [
{
dataField: 'productname',
filterFunction: function (value) {
if (value == "Black Tea" || value == "Green Tea")
return true;
return false;
}
}
],
values: [
{ dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
{ dataField: 'price', 'function': 'count', text: 'count' },
{
dataField: 'quantity',
text: 'variance',
'function': 'var',
formatSettings: { decimalPlaces: 2 }
}
]
});
// create a pivot grid
$('#divPivotGrid').jqxPivotGrid(
{
source: pivotDataSource,
treeStyleRows: false, // change this property to switch between treestyle and olap style display
autoResize: false,
multipleSelectionEnabled: true
});
});
</script>
</head>
<body class='default'>
<div id="divPivotGrid" style="height: 400px; width: 800px; background-color: white;">
</div>
<div class="example-description">
<h2>Description</h2>
<div style="width: 800px;">
This is an example of Pivot Grid with custom a custom data aggregation function. The pivot grid provides
several built-in functions: count, sum, min, max, average, product. In this example, we implement a custom
function that calculates the variance of the data points of the respective pivot grid cell. To add or modify existing
data aggregation functions, set the customAggregationFunctions property of the pivot data source. Each pivot
aggregation functions must have a unique name, take an array of values as a parameter and return a number.
For performance reasons, make sure that the function runs as quickly as possible. The pivot grid will call the function
multiple times during the data pivoting operations.
</div>
</div>
<div style="position: absolute; bottom: 5px; right: 5px;">
<a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a>
</div>
</body>
</html>