jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
199 lines (175 loc) • 9.39 kB
HTML
<html lang="en">
<head>
<title id='Description'>JavaScript PivotGrid - Pivot Table Designer</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/jqxcheckbox.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxinput.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/jqxwindow.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdragdrop.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="../../../jqwidgets/jqxpivotdesigner.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,
fields: [
{ dataField: 'firstname', text: 'First Name' },
{ dataField: 'lastname', text: 'Last Name' },
{ dataField: 'productname', text: 'Product Name' },
{ dataField: 'quantity', text: 'Quantity' },
{ dataField: 'price', text: 'Price' },
{ dataField: 'total', text: 'Total' }
],
rows: [
{ dataField: 'firstname', text: 'First Name' },
{ dataField: 'lastname', text: 'Last Name' }
],
columns: [{ dataField: 'productname', align: 'left' }],
filters: [
{
dataField: 'productname',
text: 'Product name',
filterFunction: function (value) {
if (value == "Black Tea" || value == "Green Tea")
return true;
return false;
}
}
],
values: [
{ dataField: 'price', 'function': 'sum', text: 'Sum', align: 'left', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'center' }, cellsClassName: 'myItemStyle', cellsClassNameSelected: 'myItemStyleSelected' },
{ dataField: 'price', 'function': 'count', text: 'Count', className: 'myItemStyle', classNameSelected: 'myItemStyleSelected' }
]
});
var localization = { 'var': 'Variance' };
// create a pivot grid
$('#divPivotGrid').jqxPivotGrid(
{
localization: localization,
source: pivotDataSource,
treeStyleRows: false,
autoResize: false,
multipleSelectionEnabled: true
});
var pivotGridInstance = $('#divPivotGrid').jqxPivotGrid('getInstance');
// create a pivot grid
$('#divPivotGridDesigner').jqxPivotDesigner(
{
type: 'pivotGrid',
target: pivotGridInstance
});
});
</script>
</head>
<body class='default'>
<table>
<tr>
<td>
<div id="divPivotGridDesigner" style="height: 400px; width: 250px;">
</div>
</td>
<td>
<div id="divPivotGrid" style="height: 400px; width: 550px;">
</div>
</td>
</tr>
</table>
<div class="example-description">
<br />
<h2>Description</h2>
<div style="width: 800px;">
This is an example of a Pivot Grid and a Pivot Grid Designer. You can use the pivot grid designer
to select which fields will be displayed on rows and columns. You can also select different value fields
and choose an aggregation function. Simply drag and drop fields in the respective area and the pivot grid's
content will update automatically. You can also click on the menu of each columns, rows, filters or values item
and select additional options like text alignment, number formatting and numbers alignment.
</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>