| Name | Type | Default |
|---|---|---|
| source | Object | null |
|
Gets or sets pivot source adapter used to supply data to the pivot grid.
<template>
<JqxPivotGrid ref="myPivotGrid"
:source="source" :autoResize="true"
/>
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
}
}
</script>
|
||
| localization | Object | null |
|
Gets or sets the localization object used to localize the text elements of the pivot grid.
<template>
<JqxPivotGrid ref="myPivotGrid"
:source="source" :autoResize="true" :localization="localization"
/>
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
data: function () {
return {
localization: {
sortascendingstring: 'Sortiere aufsteigend',
sortdescendingstring: 'Sortiere absteigend',
sortremovestring: 'Entferne Sortierung'
}
}
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
}
}
</script>
|
||
| scrollBarsEnabled | Boolean | true |
|
Gets or sets whether the scrollbars of the pivot grid are enabled or disabled.
<template>
<JqxPivotGrid ref="myPivotGrid"
:source="source" :autoResize="true" :scrollBarsEnabled="false"
/>
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
}
}
</script>
|
||
| selectionEnabled | Boolean | true |
|
Gets or sets whether selection in the pivot grid is enabled or disabled.
<template>
<JqxPivotGrid ref="myPivotGrid"
:source="source" :autoResize="true" :selectionEnabled="false"
/>
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
}
}
</script>
|
||
| multipleSelectionEnabled | Boolean | true |
|
Gets or sets whether the multiple selection in the pivot grid is enabled or disabled.
<template>
<JqxPivotGrid ref="myPivotGrid"
:source="source" :autoResize="true" :multipleSelectionEnabled="false"
/>
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
}
}
</script>
|
||
| treeStyleRows | Boolean | true |
|
Gets or sets the rows of the pivot grid are displayed as a tree structure or using classic OLAP style.
<template>
<JqxPivotGrid ref="myPivotGrid"
:source="source" :autoResize="true" :treeStyleRows="false"
/>
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
}
}
</script>
|
||
| autoResize | Boolean | false |
|
Gets or sets if the size of pivot grid adjusts automatically to display the entire content.
<template>
<JqxPivotGrid ref="myPivotGrid"
:source="source" :autoResize="true"
/>
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
}
}
</script>
|
||
| itemsRenderer | Function | null |
|
Custom rendering function used to render the pivot rows and columns. The function should return a string which is valid HTML.
<template>
<JqxPivotGrid ref="myPivotGrid"
:source="source" :autoResize="true" :itemsRenderer="itemsRenderer"
/>
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
methods: {
itemsRenderer: function (pivotItem) {
const backgroundColor = pivotItem.isColumn ? 'rgba(187, 232, 227, 255)' : 'rgba(203, 254, 187, 255)';
return '<div style="background: '
+ backgroundColor
+ '; width: calc(100% - 8px); height: calc(100% - 8px); padding: 4px;">'
+ pivotItem.text
+ '</div>';
}
}
}
</script>
|
||
| cellsRenderer | Function | null |
|
Custom rendering function used to render the pivot cells. The function should return a string which is valid HTML.
<template>
<JqxPivotGrid ref="myPivotGrid"
:source="source" :autoResize="true" :cellsRenderer="cellsRenderer"
/>
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
methods: {
cellsRenderer: function (pivotCell) {
const backgroundColor = 'rgba(253, 254, 207, 255)';
const cellText = pivotCell.value == 0 ? '' : pivotCell.formattedValue;
return '<div style="background: ' + backgroundColor + '; width: calc(100%-8px); height: 100%; padding: 4px; margin: 0px;">' + cellText + '</div>';
}
}
}
</script>
|
||
Events |
||
| pivotitemexpanding | Event | |
|
This event is triggered when a pivot item is expanding. You may use the event's cancel flag to stop further processing.
Code examples
Bind to the
<template>
<JqxPivotGrid ref="myPivotGrid" @pivotitemexpanding="onPivotitemexpanding($event)"
:source="source" :autoResize="true"
/>
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
methods: {
onPivotitemexpanding: function (event) {
alert('do something...');
}
}
}
</script>
|
||
| pivotitemexpanded | Event | |
|
This event is triggered after a pivot item is expanded.
Code examples
Bind to the
<template>
<JqxPivotGrid ref="myPivotGrid" @pivotitemexpanded="onPivotitemexpanded($event)"
:source="source" :autoResize="true"
/>
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
methods: {
onPivotitemexpanded: function (event) {
alert('do something...');
}
}
}
</script>
|
||
| pivotitemcollapsing | Event | |
|
This event is triggered when a pivot item is collapsing. You may use the event's cancel flag to stop further processing.
Code examples
Bind to the
<template>
<JqxPivotGrid ref="myPivotGrid" @pivotitemcollapsing="onPivotitemcollapsing($event)"
:source="source" :autoResize="true"
/>
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
methods: {
onPivotitemcollapsing: function (event) {
alert('do something...');
}
}
}
</script>
|
||
| pivotitemcollapsed | Event | |
|
This event is triggered after a pivot item is collapsed.
Code examples
Bind to the
<template>
<JqxPivotGrid ref="myPivotGrid" @pivotitemcollapsed="onPivotitemcollapsed($event)"
:source="source" :autoResize="true"
/>
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
methods: {
onPivotitemcollapsed: function (event) {
alert('do something...');
}
}
}
</script>
|
||
| sortchanging | Event | |
|
This event is triggered the sorting is about to change. You may use the event's cancel flag to stop further processing.
Code examples
Bind to the
<template>
<JqxPivotGrid ref="myPivotGrid" @sortchanging="onSortchanging($event)"
:source="source" :autoResize="true"
/>
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
methods: {
onSortchanging: function (event) {
alert('do something...');
}
}
}
</script>
|
||
| sortchanged | Event | |
|
This event is triggered after the sorting order has changed.
Code examples
Bind to the
<template>
<JqxPivotGrid ref="myPivotGrid" @sortchanged="onSortchanged($event)"
:source="source" :autoResize="true"
/>
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
methods: {
onSortchanged: function (event) {
alert('do something...');
}
}
}
</script>
|
||
| sortremoving | Event | |
|
This event is triggered the sorting is about to be removed. You may use the event's cancel flag to stop further processing.
Code examples
Bind to the
<template>
<JqxPivotGrid ref="myPivotGrid" @sortremoving="onSortremoving($event)"
:source="source" :autoResize="true"
/>
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
methods: {
onSortremoving: function (event) {
alert('do something...');
}
}
}
</script>
|
||
| sortremoved | Event | |
|
This event is triggered after the sorting has been removed.
Code examples
Bind to the
<template>
<JqxPivotGrid ref="myPivotGrid" @sortremoved="onSortremoved($event)"
:source="source" :autoResize="true"
/>
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
methods: {
onSortremoved: function (event) {
alert('do something...');
}
}
}
</script>
|
||
| pivotitemselectionchanged | Event | |
|
This event is triggered after the selection of a pivot item has changed.
Code examples
Bind to the
<template>
<JqxPivotGrid ref="myPivotGrid" @pivotitemselectionchanged="onPivotitemselectionchanged($event)"
:source="source" :autoResize="true"
/>
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
methods: {
onPivotitemselectionchanged: function (event) {
alert('do something...');
}
}
}
</script>
|
||
| pivotcellmousedown | Event | |
|
This event is triggered on mousedown over a pivot grid cell. You may use the event's cancel flag to stop further processing.
Code examples
Bind to the
<template>
<JqxPivotGrid ref="myPivotGrid" @pivotcellmousedown="onPivotcellmousedown($event)"
:source="source" :autoResize="true"
/>
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
methods: {
onPivotcellmousedown: function (event) {
alert('do something...');
}
}
}
</script>
|
||
| pivotcellmouseup | Event | |
|
This event is triggered on mouseup over a pivot grid cell. You may use the event's cancel flag to stop further processing.
Code examples
Bind to the
<template>
<JqxPivotGrid ref="myPivotGrid" @pivotcellmouseup="onPivotcellmouseup($event)"
:source="source" :autoResize="true"
/>
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
methods: {
onPivotcellmouseup: function (event) {
alert('do something...');
}
}
}
</script>
|
||
| pivotcellclick | Event | |
|
This event is triggered on click over a pivot grid cell. You may use the event's cancel flag to stop further processing.
Code examples
Bind to the
<template>
<JqxPivotGrid ref="myPivotGrid" @pivotcellclick="onPivotcellclick($event)"
:source="source" :autoResize="true"
/>
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
methods: {
onPivotcellclick: function (event) {
alert('do something...');
}
}
}
</script>
|
||
| pivotcelldblclick | Event | |
|
This event is triggered on double click over a pivot grid cell. You may use the event's cancel flag to stop further processing.
Code examples
Bind to the
<template>
<JqxPivotGrid ref="myPivotGrid" @pivotcelldblclick="onPivotcelldblclick($event)"
:source="source" :autoResize="true"
/>
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
methods: {
onPivotcelldblclick: function (event) {
alert('do something...');
}
}
}
</script>
|
||
| pivotitemmousedown | Event | |
|
This event is triggered on mousedown over a pivot grid item. You may use the event's cancel flag to stop further processing.
Code examples
Bind to the
<template>
<JqxPivotGrid ref="myPivotGrid" @pivotitemmousedown="onPivotitemmousedown($event)"
:source="source" :autoResize="true"
/>
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
methods: {
onPivotitemmousedown: function (event) {
alert('do something...');
}
}
}
</script>
|
||
| pivotitemmouseup | Event | |
|
This event is triggered on mouseup over a pivot grid item. You may use the event's cancel flag to stop further processing.
Code examples
Bind to the
<template>
<JqxPivotGrid ref="myPivotGrid" @pivotitemmouseup="onPivotitemmouseup($event)"
:source="source" :autoResize="true"
/>
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
methods: {
onPivotitemmouseup: function (event) {
alert('do something...');
}
}
}
</script>
|
||
| pivotitemclick | Event | |
|
This event is triggered on click over a pivot grid item. You may use the event's cancel flag to stop further processing.
Code examples
Bind to the
<template>
<JqxPivotGrid ref="myPivotGrid" @pivotitemclick="onPivotitemclick($event)"
:source="source" :autoResize="true"
/>
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
methods: {
onPivotitemclick: function (event) {
alert('do something...');
}
}
}
</script>
|
||
| pivotitemdblclick | Event | |
|
This event is triggered on double click over a pivot grid item. You may use the event's cancel flag to stop further processing.
Code examples
Bind to the
<template>
<JqxPivotGrid ref="myPivotGrid" @pivotitemdblclick="onPivotitemdblclick($event)"
:source="source" :autoResize="true"
/>
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
methods: {
onPivotitemdblclick: function (event) {
alert('do something...');
}
}
}
</script>
|
||
Methods |
||
| Name | Arguments | Return Type |
| getInstance | Object | |
|
Returns the instance of the pivot grid component
<template>
<JqxPivotGrid ref="myPivotGrid"
:source="source" :autoResize="true"
/>
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const value = this.$refs.myPivotGrid.getInstance();
}
}
</script>
|
||
| refresh | None | |
|
Refreshes the content of the pivot grid component
<template>
<JqxPivotGrid ref="myPivotGrid"
:source="source" :autoResize="true"
/>
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
this.$refs.myPivotGrid.refresh();
}
}
</script>
|
||
| getPivotRows | Object | |
|
Return the pivot rows of the pivot grid
<template>
<JqxPivotGrid ref="myPivotGrid"
:source="source" :autoResize="true"
/>
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const value = this.$refs.myPivotGrid.getPivotRows();
}
}
</script>
|
||
| getPivotColumns | Object | |
|
Return the pivot columns of the pivot grid
<template>
<JqxPivotGrid ref="myPivotGrid"
:source="source" :autoResize="true"
/>
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const value = this.$refs.myPivotGrid.getPivotColumns();
}
}
</script>
|
||
| getPivotCells | Object | |
|
Return the pivot cells of the pivot grid
<template>
<JqxPivotGrid ref="myPivotGrid"
:source="source" :autoResize="true"
/>
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const value = this.$refs.myPivotGrid.getPivotCells();
}
}
</script>
|
||
| Name | Type | Default |
|---|---|---|
| type | String | pivotGrid |
|
Gets or sets the type of the pivot designer - pivotGrid or pivotChart.
<template>
<table>
<tr>
<td>
<JqxPivotDesigner style="width: 250px; height: 400px;"
ref="pivotDesigner" :type="'pivotGrid'">
</JqxPivotDesigner>
</td>
<td>
<JqxPivotGrid style="width: 550px; height: 400px;"
ref="pivotGrid" :source="source" :treeStyleRows="false"
:autoResize="false" :multipleSelectionEnabled="true">
</JqxPivotGrid>
</td>
</tr>
</table>
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
import JqxPivotDesigner from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotdesigner.vue';
export default {
components: {
JqxPivotGrid,
JqxPivotDesigner
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
let data = new Array();
const firstNames =
[
'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi', 'Antoni', 'Mayumi', 'Ian', 'Peter', 'Lars', 'Petra', 'Martin', 'Sven', 'Elio', 'Beate', 'Cheryl', 'Michael', 'Guylene'
];
const lastNames =
[
'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase', 'Saavedra', 'Ohno', 'Devling', 'Wilson', 'Peterson', 'Winkler', 'Bein', 'Petersen', 'Rossi', 'Vileid', 'Saylor', 'Bjorn', 'Nodier'
];
const 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'
];
const 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 (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname', text: 'First Name' }, { dataField: 'lastname' }],
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' }
]
}
);
return pivotDataSource;
};
this.source = createPivotDataSource();
},
mounted: function () {
const pivotGridInstance = this.$refs.pivotGrid.getInstance();
this.$refs.pivotDesigner.target = pivotGridInstance;
this.$refs.pivotDesigner.refresh();
}
}
</script>
|
||
| target | Object | null |
|
Gets or sets the instance of the widget component controlled by the pivot designer component.
<template>
<table>
<tr>
<td>
<JqxPivotDesigner style="width: 250px; height: 400px;"
ref="pivotDesigner" :type="'pivotGrid'">
</JqxPivotDesigner>
</td>
<td>
<JqxPivotGrid style="width: 550px; height: 400px;"
ref="pivotGrid" :source="source" :treeStyleRows="false"
:autoResize="false" :multipleSelectionEnabled="true">
</JqxPivotGrid>
</td>
</tr>
</table>
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
import JqxPivotDesigner from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotdesigner.vue';
export default {
components: {
JqxPivotGrid,
JqxPivotDesigner
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
let data = new Array();
const firstNames =
[
'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi', 'Antoni', 'Mayumi', 'Ian', 'Peter', 'Lars', 'Petra', 'Martin', 'Sven', 'Elio', 'Beate', 'Cheryl', 'Michael', 'Guylene'
];
const lastNames =
[
'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase', 'Saavedra', 'Ohno', 'Devling', 'Wilson', 'Peterson', 'Winkler', 'Bein', 'Petersen', 'Rossi', 'Vileid', 'Saylor', 'Bjorn', 'Nodier'
];
const 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'
];
const 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 (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname', text: 'First Name' }, { dataField: 'lastname' }],
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' }
]
}
);
return pivotDataSource;
};
this.source = createPivotDataSource();
},
mounted: function () {
const pivotGridInstance = this.$refs.pivotGrid.getInstance();
this.$refs.pivotDesigner.target = pivotGridInstance;
this.$refs.pivotDesigner.refresh();
}
}
</script>
|
||
Methods |
||
| Name | Arguments | Return Type |
| refresh | None | |
|
Refreshes the content of the pivot designer component.
<template>
<table>
<tr>
<td>
<JqxPivotDesigner style="width: 250px; height: 400px;"
ref="pivotDesigner" :type="'pivotGrid'">
</JqxPivotDesigner>
</td>
<td>
<JqxPivotGrid style="width: 550px; height: 400px;"
ref="pivotGrid" :source="source" :treeStyleRows="false"
:autoResize="false" :multipleSelectionEnabled="true">
</JqxPivotGrid>
</td>
</tr>
</table>
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
import JqxPivotDesigner from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotdesigner.vue';
export default {
components: {
JqxPivotGrid,
JqxPivotDesigner
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
let data = new Array();
const firstNames =
[
'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi', 'Antoni', 'Mayumi', 'Ian', 'Peter', 'Lars', 'Petra', 'Martin', 'Sven', 'Elio', 'Beate', 'Cheryl', 'Michael', 'Guylene'
];
const lastNames =
[
'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase', 'Saavedra', 'Ohno', 'Devling', 'Wilson', 'Peterson', 'Winkler', 'Bein', 'Petersen', 'Rossi', 'Vileid', 'Saylor', 'Bjorn', 'Nodier'
];
const 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'
];
const 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 (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname', text: 'First Name' }, { dataField: 'lastname' }],
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' }
]
}
);
return pivotDataSource;
};
this.source = createPivotDataSource();
},
mounted: function () {
const pivotGridInstance = this.$refs.pivotGrid.getInstance();
this.$refs.pivotDesigner.target = pivotGridInstance;
this.$refs.pivotDesigner.refresh();
}
}
</script>
|
||
| Name | Type | Default |
|---|---|---|
| pivotRow | Object | null |
|
The row of the pivot cell.
<template>
<JqxPivotGrid ref="myPivotGrid"
:source="source" :autoResize="true" :cellsRenderer="myCellsRenderer" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
methods: {
myCellsRenderer: function (pivotCell) {
const colors = ['rgba(248, 105, 107, 255)', 'rgba(250,170,120,255)', 'rgba(255,230,130,255)', 'rgba(175,215,130,255)', 'rgba(100,190,120,255)'];
const selectedColors = ['rgba(228, 85, 87, 255)', 'rgba(230,150,100,255)', 'rgba(235,210,110,255)', 'rgba(155,195,110,255)', 'rgba(80,170,100,255)'];
const val = Math.min(pivotCell.value, 20);
let backgroundColor = pivotCell.isSelected ? selectedColors[Math.round(val / 5)] : colors[Math.round(val / 5)];
// Pivot Column
if (pivotCell.pivotColumn.text !== 'sum')
backgroundColor = pivotCell.isSelected ? 'rgba(225, 225, 225, 255)' : 'rgba(255, 255, 255, 255)';
if (pivotCell.isSelected)
backgroundColor
const cellText = pivotCell.value == 0 ? '' : pivotCell.formattedValue;
return '<div style="background: ' + backgroundColor + '; width: calc(100%-8px); height: 100%; padding: 4px; margin: 0px;">' + cellText + '</div>';
}
}
}
</script>
|
||
| pivotColumn | Object | null |
|
The column of the pivot cell.
<template>
<JqxPivotGrid ref="myPivotGrid"
:source="source" :autoResize="true" :cellsRenderer="myCellsRenderer" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
methods: {
myCellsRenderer: function (pivotCell) {
const colors = ['rgba(248, 105, 107, 255)', 'rgba(250,170,120,255)', 'rgba(255,230,130,255)', 'rgba(175,215,130,255)', 'rgba(100,190,120,255)'];
const selectedColors = ['rgba(228, 85, 87, 255)', 'rgba(230,150,100,255)', 'rgba(235,210,110,255)', 'rgba(155,195,110,255)', 'rgba(80,170,100,255)'];
const val = Math.min(pivotCell.value, 20);
let backgroundColor = pivotCell.isSelected ? selectedColors[Math.round(val / 5)] : colors[Math.round(val / 5)];
// Pivot Row
if (pivotCell.pivotRow.text !== 'Nancy')
backgroundColor = pivotCell.isSelected ? 'rgba(225, 225, 225, 255)' : 'rgba(255, 255, 255, 255)';
if (pivotCell.isSelected)
backgroundColor
const cellText = pivotCell.value == 0 ? '' : pivotCell.formattedValue;
return '<div style="background: ' + backgroundColor + '; width: calc(100%-8px); height: 100%; padding: 4px; margin: 0px;">' + cellText + '</div>';
}
}
}
</script>
|
||
| Name | Type | Default |
|---|---|---|
| prefix | String | null |
|
Optional text that appears at the start of the formatted string.
<template>
<JqxPivotGrid ref="myPivotGrid"
:source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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: [
{ // PREFIX
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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
}
}
</script>
|
||
| sufix | String | null |
|
Optional text that appears at the end of the formatted string.
<template>
<JqxPivotGrid ref="myPivotGrid"
:source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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: [
{ // SUFIX
dataField: 'price', 'function': 'sum', text: 'sum',
formatSettings: { sufix: '$', decimalPlaces: 2, align: 'right' }
},
{ dataField: 'price', 'function': 'count', text: 'count' },
{
dataField: 'quantity',
text: 'variance',
'function': 'var',
formatSettings: { decimalPlaces: 2 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
}
}
</script>
|
||
| decimalSeparator | String | . |
|
Separator for the decimal point in the cell's value.
<template>
<JqxPivotGrid ref="myPivotGrid"
:source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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: [
{ // Decimal Separator
dataField: 'price', 'function': 'sum', text: 'sum',
formatSettings: { decimalSeparator: '...', decimalPlaces: 2, align: 'right' }
},
{ dataField: 'price', 'function': 'count', text: 'count' },
{
dataField: 'quantity',
text: 'variance',
'function': 'var',
formatSettings: { decimalPlaces: 2 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
}
}
</script>
|
||
| thousandsSeparator | String | , |
|
Separator for the thousands in the cell's value.
<template>
<JqxPivotGrid ref="myPivotGrid"
:source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['200000.25', '10000.5', '30000.0', '30000.3', '40000.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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: [
{ // Thousands Separator
dataField: 'price', 'function': 'sum', text: 'sum',
formatSettings: { thousandsSeparator: '...', decimalPlaces: 2, align: 'right' }
},
{ dataField: 'price', 'function': 'count', text: 'count' },
{
dataField: 'quantity',
text: 'variance',
'function': 'var',
formatSettings: { decimalPlaces: 2 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
}
}
</script>
|
||
| decimalPlaces | Number | 2 |
|
Number of decimal places for the cell's value.
<template>
<JqxPivotGrid ref="myPivotGrid"
:source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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: [
{ // Decimal Places
dataField: 'price', 'function': 'sum', text: 'sum',
formatSettings: { decimalPlaces: 4, align: 'right' }
},
{ dataField: 'price', 'function': 'count', text: 'count' },
{
dataField: 'quantity',
text: 'variance',
'function': 'var',
formatSettings: { decimalPlaces: 2 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
}
}
</script>
|
||
| negativeWithBrackets | Boolean | false |
|
Determines if negative numbers will be displayed in brackets () or with a negative sign - .
<template>
<JqxPivotGrid ref="myPivotGrid"
:source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['-2.25', '-1.5', '-3.0', '-3.3', '-4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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: [
{ // Negative With Brackets
dataField: 'price', 'function': 'sum', text: 'sum',
formatSettings: { negativeWithBrackets: true, decimalPlaces: 2, align: 'right' }
},
{ dataField: 'price', 'function': 'count', text: 'count' },
{
dataField: 'quantity',
text: 'variance',
'function': 'var',
formatSettings: { decimalPlaces: 2 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
}
}
</script>
|
||
| Name | Type | Default |
|---|---|---|
Methods |
||
| Name | Arguments | Return Type |
| hitTest | point | Object |
|
Returns the pivot cell at the corresponding position if exists
|
||
| clear | None | |
|
Clears all pivot cells
|
||
| setCellValue | pivotRow, pivotColumn, value | None |
|
Sets the value of a pivot cell
|
||
| getCellValue | pivotRow, pivotColumn | Object |
|
Gets the value of a pivot cell
<template>
<JqxPivotGrid ref="myPivotGrid"
:source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const pivotGridInstance = this.$refs.myPivotGrid.getInstance();
const pivotRow = this.$refs.myPivotGrid.getPivotRows().items[0];
const pivotColumn = this.$refs.myPivotGrid.getPivotColumns().items[0].valueItems[0];
const cellValue = pivotGridInstance.getPivotCells().getCellValue(pivotRow, pivotColumn);
}
}
</script>
|
||
| drillThroughCell | pivotRow, pivotColumn | Array |
|
Drills through a pivot cells and returns the respective source data records
<template>
<JqxPivotGrid ref="myPivotGrid"
:source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const pivotGridInstance = this.$refs.myPivotGrid.getInstance();
const pivotRow = this.$refs.myPivotGrid.getPivotRows().items[0];
const pivotColumn = this.$refs.myPivotGrid.getPivotColumns().items[0].valueItems[0];
const drillThroughCell = pivotGridInstance.getPivotCells().drillThroughCell(pivotRow, pivotColumn);
}
}
</script>
|
||
| selectCell | pivotRow, pivotColumn | None |
|
Selects a pivot cell
<template>
<JqxPivotGrid ref="myPivotGrid"
:source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const pivotGridInstance = this.$refs.myPivotGrid.getInstance();
const pivotRow = this.$refs.myPivotGrid.getPivotRows().items[2];
const pivotColumn = this.$refs.myPivotGrid.getPivotColumns().items[0].valueItems[2];
// use the arrow keys to see that the 3rth row, 3rth sub column cell is selected
pivotGridInstance.getPivotCells().selectCell(pivotRow, pivotColumn);
}
}
</script>
|
||
| unselectCell | pivotRow, pivotColumn | None |
|
Unselects a pivot cell
|
||
| clearSelection | None | |
|
Clears the selection of all selected pivot cells
<template>
<JqxPivotGrid ref="myPivotGrid"
:source="source" :autoResize="true" @pivotcellclick="pivotcellclick"/>
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
methods: {
pivotcellclick: function (event) {
const pivotInstance = this.$refs.myPivotGrid.getInstance();
pivotInstance.getPivotCells().clearSelection();
}
}
}
</script>
|
||
| isCellSelected | pivotRow, pivotColumn | Boolean |
|
Checks if a pivot cell is selected
<template>
<JqxPivotGrid ref="myPivotGrid"
:source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const pivotGridInstance = this.$refs.myPivotGrid.getInstance();
const pivotRow = this.$refs.myPivotGrid.getPivotRows().items[2];
const pivotColumn = this.$refs.myPivotGrid.getPivotColumns().items[0].valueItems[2];
// false
let isCellSelected = pivotGridInstance.getPivotCells().isCellSelected(pivotRow, pivotColumn);
pivotGridInstance.getPivotCells().selectCell(pivotRow, pivotColumn);
// true
isCellSelected = pivotGridInstance.getPivotCells().isCellSelected(pivotRow, pivotColumn);
}
}
</script>
|
||
| getSelectedCellsCount | Number | |
|
Returns the number of selected cells
|
||
| getSelectedCells | Array | |
|
Returns an array of all selected cells
<template>
<JqxPivotGrid ref="myPivotGrid"
:source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const pivotGridInstance = this.$refs.myPivotGrid.getInstance();
const pivotRow = this.$refs.myPivotGrid.getPivotRows().items[2];
const pivotColumn = this.$refs.myPivotGrid.getPivotColumns().items[0].valueItems[2];
// use the arrow keys to see that the 3rth row, 3rth sub column cell is selected
pivotGridInstance.getPivotCells().selectCell(pivotRow, pivotColumn);
const selectedCells = pivotGridInstance.getPivotCells().getSelectedCells();
}
}
</script>
|
||
| getNextCell | pivotCell, position | Object |
|
Returns the cell left, right, above or below a specific pivot cell
<template>
<JqxPivotGrid ref="myPivotGrid"
:source="source" :autoResize="true" :cellsRenderer="cellsRenderer" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
methods: {
cellsRenderer: function (pivotCell) {
const pivotGridInstance = this.$refs.myPivotGrid.getInstance();
const nextCell = pivotGridInstance.getPivotCells().getNextCell(pivotCell);
return pivotCell.formattedValue;
}
}
}
</script>
|
||
| Name | Type | Default |
|---|---|---|
| resizable | Boolean | true |
|
Gets or sets if the collection of pivot items is resizable.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
this.$refs.myPivotGrid.getPivotColumns().resizable = false;
}
}
</script>
|
||
| sortable | Boolean | true |
|
Gets or sets if the collection of pivot items is sortable.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
this.$refs.myPivotGrid.getPivotColumns().sortable = false;
}
}
</script>
|
||
| showExpandCollapseButtons | Boolean | true |
|
Gets or sets if expand/collapse buttons are visible.
<template>
<JqxPivotGrid ref="myPivotGrid"
:source="source" :autoResize="true" @pivotcellclick="pivotcellclick" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [ { dataField: 'lastname' }],
columns: [{ dataField: 'firstname' },{ 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
methods: {
pivotcellclick: function (event) {
const pivotInstance = this.$refs.myPivotGrid.getInstance();
pivotInstance.getPivotColumns().showExpandCollapseButtons = false;
pivotInstance.refresh();
}
}
}
</script>
|
||
| parentPivotGrid | Object | null |
|
Returns a reference to the parent pivot grid instance.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const parentPivotGrid = this.$refs.myPivotGrid.getPivotColumns().parentPivotGrid;
}
}
</script>
|
||
| items | Array | [] |
|
Returns an array of all child pivot items.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const pivotColumn = this.$refs.myPivotGrid.getPivotColumns().items;
}
}
</script>
|
||
| valueItems | Array | [] |
|
Returns an array of all child pivot value items.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const valueItems = this.$refs.myPivotGrid.getPivotColumns().items[0].valueItems[2];
}
}
</script>
|
||
| isHidden | Boolean | false |
|
Returns true if the pivot items collection is hidden.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const isHidden = this.$refs.myPivotGrid.getPivotColumns().isHidden;
}
}
</script>
|
||
Methods |
||
| Name | Arguments | Return Type |
| show | None | |
|
Makes the pivot items collection visible
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const pivotColumns = this.$refs.myPivotGrid.getInstance().getPivotColumns();
pivotColumns.hide();
pivotColumns.refresh();
setTimeout(_ => {
pivotColumns.show();
pivotColumns.refresh();
}, 2000)
}
}
</script>
|
||
| hide | None | |
|
Hides the pivot items collection
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const pivotColumns = this.$refs.myPivotGrid.getInstance().getPivotColumns();
pivotColumns.hide();
pivotColumns.refresh();
setTimeout(_ => {
pivotColumns.show();
pivotColumns.refresh();
}, 2000)
}
}
</script>
|
||
| refresh | None | |
|
Refreshes the content of the pivot items collection
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const pivotColumns = this.$refs.myPivotGrid.getInstance().getPivotColumns();
pivotColumns.hide();
pivotColumns.refresh();
setTimeout(_ => {
pivotColumns.show();
pivotColumns.refresh();
}, 2000)
}
}
</script>
|
||
| getHierarchyDepth | Number | |
|
Returns the depth of the collection
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const hierarchyDepth = this.$refs.myPivotGrid.getPivotColumns().getHierarchyDepth();
}
}
</script>
|
||
| autoResize | autoResizeMode | None |
|
Auto resizes the pivot items collection.
autoResizeMode: "default", "fitAll", "fitItemContent" <template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const pivotRows = this.$refs.myPivotGrid.getInstance().getPivotRows();
pivotRows.autoResize('fitItemContent');
}
}
</script>
|
||
| getSortItem | Object | |
|
Returns the sort item of the collection
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" @sortchanged="sortchanged" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
methods: {
sortchanged: function () {
const sortItem = this.$refs.myPivotGrid.getPivotColumns().getSortItem();
}
}
}
</script>
|
||
| getSortOrder | Object | |
|
Returns the sort order of the collection
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" @sortchanged="sortchanged" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
methods: {
sortchanged: function () {
const sortOrder = this.$refs.myPivotGrid.getPivotColumns().getSortOrder();
}
}
}
</script>
|
||
| sortBy | pivotItem, | None |
|
Sorts the items collection
|
||
| removeSort | None | |
|
Removes the sort order of the collection
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" @sortchanged="sortchanged" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
methods: {
sortchanged: function () {
setTimeout(_ => this.$refs.myPivotGrid.getPivotColumns().removeSort(), 2000);
}
}
}
</script>
|
||
| selectItem | pivotItem | None |
|
Selects a pivot item
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const pivotColumns = this.$refs.myPivotGrid.getInstance().getPivotColumns();
pivotColumns.selectItem(pivotColumns.items[1]);
pivotColumns.refresh();
setTimeout(_ => {
pivotColumns.unselectItem(pivotColumns.items[1]);
pivotColumns.refresh();
}, 2000);
}
}
</script>
|
||
| unselectItem | pivotItem | None |
|
Clears the selection of a pivot item
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const pivotColumns = this.$refs.myPivotGrid.getInstance().getPivotColumns();
pivotColumns.selectItem(pivotColumns.items[1]);
pivotColumns.refresh();
setTimeout(_ => {
pivotColumns.unselectItem(pivotColumns.items[1]);
pivotColumns.refresh();
}, 2000);
}
}
</script>
|
||
| clearSelection | None | |
|
Clears the selection of all items in the collection
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const pivotColumns = this.$refs.myPivotGrid.getInstance().getPivotColumns();
pivotColumns.selectItem(pivotColumns.items[1])
pivotColumns.refresh();
setTimeout(_ => {
pivotColumns.clearSelection();
pivotColumns.refresh();
}, 2000);
}
}
</script>
|
||
| getSelectedItems | Array | |
|
Returns all selected items in an array
<template>
<div>
<JqxPivotGrid ref="myPivotGrid"
:source="source" :autoResize="true" />
<br />
<p>Select several columns(CTRL + mousedown) and then click the button.</p>
<button @click="getSelectedItems()">Get Selected Items</button>
<p id="panel"></p>
</div>
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
methods: {
getSelectedItems: function () {
const items = this.$refs.myPivotGrid.getPivotColumns().getSelectedItems();
document.querySelector('#panel').innerHTML = items;
}
}
}
</script>
|
||
| Name | Type | Default |
|---|---|---|
| dataField | String | null |
|
The dataField in the data source used for this pivot field.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname', text: 1111, align: 'left', className: 'red', classNameSelected: 'blue' }, { 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
}
}
</script>
<style>
.red {
color: white;
background-color: red;
}
.blue {
color: white;
background-color: blue;
}
</style>
|
||
| text | String | null |
|
The text which will appear in the pivot designer when using this field.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname', text: 1111, align: 'left', className: 'red', classNameSelected: 'blue' }, { 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
}
}
</script>
<style>
.red {
color: white;
background-color: red;
}
.blue {
color: white;
background-color: blue;
}
</style>
|
||
| align | String | null |
|
Text alignment when the value of this field is displayed on the pivot rows or pivot columns.("left", "center", "right")
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname', text: 1111, align: 'left', className: 'red', classNameSelected: 'blue' }, { 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
}
}
</script>
<style>
.red {
color: white;
background-color: red;
}
.blue {
color: white;
background-color: blue;
}
</style>
|
||
| className | String | null |
|
Name of style to use when displaying this field on the pivot rows or columns.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname', text: 1111, align: 'left', className: 'red', classNameSelected: 'blue' }, { 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
}
}
</script>
<style>
.red {
color: white;
background-color: red;
}
.blue {
color: white;
background-color: blue;
}
</style>
|
||
| classNameSelected | String | null |
|
Name of style to use when displaying this field on the pivot rows or columns and column or row is selected.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname', text: 1111, align: 'left', className: 'red', classNameSelected: 'blue' }, { 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
}
}
</script>
<style>
.red {
color: white;
background-color: red;
}
.blue {
color: white;
background-color: blue;
}
</style>
|
||
| Name | Type | Default |
|---|---|---|
| dataField | String | null |
|
The dataField in the data source used for this pivot filter field.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
columns: [{ dataField: 'productname' }],
// Pivot Filter Field
filters: [
{
dataField: 'productname',
text: 'New Text',
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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
}
}
</script>
|
||
| text | String | null |
|
The text which will appear in the pivot designer when using this field.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
columns: [{ dataField: 'productname' }],
// Pivot Filter Field
filters: [
{
dataField: 'productname',
text: 'New Text',
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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
}
}
</script>
|
||
| filterFunction | Function | null |
|
Implementation of the filtering function used to skip/filter records from the data source. The function should return true if the record should be filtered, otherwise false.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
columns: [{ dataField: 'productname' }],
// Pivot Filter Field
filters: [
{
dataField: 'productname',
text: 'New Text',
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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
}
}
</script>
|
||
| Name | Type | Default |
|---|---|---|
| isExpanded | Boolean | false |
|
Returns true if the pivot item is expanded.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const rowItem = this.$refs.myPivotGrid.getInstance().getPivotRows().items[2];
const columnItem = this.$refs.myPivotGrid.getInstance().getPivotColumns().items[2];
const isExpanded = rowItem.isExpanded;
}
}
</script>
|
||
| isHidden | Boolean | false |
|
Returns true if the pivot item is hidden.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const rowItem = this.$refs.myPivotGrid.getInstance().getPivotRows().items[2];
const columnItem = this.$refs.myPivotGrid.getInstance().getPivotColumns().items[2];
const isHidden = rowItem.isHidden;
}
}
</script>
|
||
| isSelected | Boolean | false |
|
Returns true if the pivot item is hidden.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const rowItem = this.$refs.myPivotGrid.getInstance().getPivotRows().items[2];
const columnItem = this.$refs.myPivotGrid.getInstance().getPivotColumns().items[2];
const isSelected = rowItem.isSelected;
}
}
</script>
|
||
| parentItem | Object | null |
|
Returns a reference to the parent item.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const rowItem = this.$refs.myPivotGrid.getInstance().getPivotRows().items[2];
const columnItem = this.$refs.myPivotGrid.getInstance().getPivotColumns().items[2];
const parentItem = rowItem.parentItem;
}
}
</script>
|
||
| hierarchy | Object | null |
|
Returns a reference to the parent rows or columns hierarchy.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const rowItem = this.$refs.myPivotGrid.getInstance().getPivotRows().items[2];
const columnItem = this.$refs.myPivotGrid.getInstance().getPivotColumns().items[2];
const hierarchy = rowItem.hierarchy;
}
}
</script>
|
||
| parentPivotGrid | Object | null |
|
Returns a reference to the parent pivot grid instance.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const rowItem = this.$refs.myPivotGrid.getInstance().getPivotRows().items[2];
const columnItem = this.$refs.myPivotGrid.getInstance().getPivotColumns().items[2];
const parentPivotGrid = rowItem.parentPivotGrid;
}
}
</script>
|
||
| items | Array | [] |
|
Returns an array of all child pivot items.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const rowItem = this.$refs.myPivotGrid.getInstance().getPivotRows().items[2];
const columnItem = this.$refs.myPivotGrid.getInstance().getPivotColumns().items[2];
const items = rowItem.items;
}
}
</script>
|
||
| valueItems | Array | [] |
|
Returns an array of all child pivot value items.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const rowItem = this.$refs.myPivotGrid.getInstance().getPivotRows().items[2];
const columnItem = this.$refs.myPivotGrid.getInstance().getPivotColumns().items[2];
const valueItems = columnItem .valueItems;
}
}
</script>
|
||
Methods |
||
| Name | Arguments | Return Type |
| getWidth | Number | |
|
Gets the width of the pivot item
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const rowItem = this.$refs.myPivotGrid.getInstance().getPivotRows().items[2];
const columnItem = this.$refs.myPivotGrid.getInstance().getPivotColumns().items[2];
const width = rowItem.getWidth();
}
}
</script>
|
||
| getDisplayWidth | Number | |
|
Gets the displayed width of the pivot item
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const rowItem = this.$refs.myPivotGrid.getInstance().getPivotRows().items[2];
const columnItem = this.$refs.myPivotGrid.getInstance().getPivotColumns().items[2];
const displayWidth = rowItem.getDisplayWidth();
}
}
</script>
|
||
| autoResize | None | |
|
Auto resizes the pivot item
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const rowItem = this.$refs.myPivotGrid.getInstance().getPivotRows().items[2];
const columnItem = this.$refs.myPivotGrid.getInstance().getPivotColumns().items[2];
rowItem.autoResize();
}
}
</script>
|
||
| getHeight | Number | |
|
Gets the height of the pivot item
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const rowItem = this.$refs.myPivotGrid.getInstance().getPivotRows().items[2];
const columnItem = this.$refs.myPivotGrid.getInstance().getPivotColumns().items[2];
const height = rowItem.getHeight();
}
}
</script>
|
||
| getDisplayHeight | Number | |
|
Gets the displayed height of the pivot item
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const rowItem = this.$refs.myPivotGrid.getInstance().getPivotRows().items[2];
const columnItem = this.$refs.myPivotGrid.getInstance().getPivotColumns().items[2];
const displayHeight = rowItem.getDisplayHeight();
}
}
</script>
|
||
| setHeight | height | None |
|
Sets the height of the pivot item
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const pivotInstance = this.$refs.myPivotGrid.getInstance();
const rowItem = pivotInstance.getPivotRows().items[2];
const columnItem = pivotInstance.getPivotColumns().items[0];
columnItem.setHeight(20);
pivotInstance.getPivotColumns().refresh();
}
}
</script>
|
||
| expand | None | |
|
Expands the pivot item so all sub-items will be visible
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const pivotInstance = this.$refs.myPivotGrid.getInstance();
const rowItem = pivotInstance.getPivotRows().items[0];
const columnItem = pivotInstance.getPivotColumns().items[2];
rowItem.expand();
pivotInstance.getPivotRows().refresh();
setTimeout(_ => {
rowItem.collapse();
pivotInstance.getPivotRows().refresh();
}, 2000);
}
}
</script>
|
||
| collapse | None | |
|
Collapses the pivot item so all sub-items will be invisible
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const pivotInstance = this.$refs.myPivotGrid.getInstance();
const rowItem = pivotInstance.getPivotRows().items[0];
const columnItem = pivotInstance.getPivotColumns().items[2];
rowItem.expand();
pivotInstance.getPivotRows().refresh();
setTimeout(_ => {
rowItem.collapse();
pivotInstance.getPivotRows().refresh();
}, 2000);
}
}
</script>
|
||
| Name | Type | Default |
|---|---|---|
| resizable | Boolean | true |
|
Gets or sets if the collection of pivot items is resizable.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const pivotRows = this.$refs.myPivotGrid.getInstance().getPivotRows();
const isResizable = pivotRows.resizable;
}
}
</script>
|
||
| sortable | Boolean | true |
|
Gets or sets if the collection of pivot items is sortable.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const pivotRows = this.$refs.myPivotGrid.getInstance().getPivotRows();
const isSortable= pivotRows.sortable;
}
}
</script>
|
||
| showExpandCollapseButtons | Boolean | true |
|
Gets or sets if expand/collapse buttons are visible.
<template>
<JqxPivotGrid ref="myPivotGrid"
:source="source" :autoResize="true" @pivotcellclick="pivotcellclick" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
methods: {
pivotcellclick: function (event) {
const pivotInstance = this.$refs.myPivotGrid.getInstance();
pivotInstance.getPivotRows().showExpandCollapseButtons = false;
pivotInstance.refresh();
}
}
}
</script>
|
||
| parentPivotGrid | Object | null |
|
Returns a reference to the parent pivot grid instance.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const pivotRows = this.$refs.myPivotGrid.getInstance().getPivotRows();
const parentPivotGrid= pivotRows.parentPivotGrid;
}
}
</script>
|
||
| items | Array | [] |
|
Returns an array of all child pivot items.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const pivotRows = this.$refs.myPivotGrid.getInstance().getPivotRows();
const items = pivotRows.items;
}
}
</script>
|
||
| valueItems | Array | [] |
|
Returns an array of all child pivot value items.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const pivotRows = this.$refs.myPivotGrid.getInstance().getPivotRows();
const valueItems = pivotRows.valueItems;
}
}
</script>
|
||
| isHidden | Boolean | false |
|
Returns true if the pivot items collection is hidden.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const pivotRows = this.$refs.myPivotGrid.getInstance().getPivotRows();
const isHidden= pivotRows.isHidden;
}
}
</script>
|
||
Methods |
||
| Name | Arguments | Return Type |
| show | None | |
|
Makes the pivot items collection visible
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const pivotRows = this.$refs.myPivotGrid.getInstance().getPivotRows();
pivotRows.hide();
pivotRows.refresh();
setTimeout(_ => {
pivotRows.show();
pivotRows.refresh();
}, 2000)
}
}
</script>
|
||
| hide | None | |
|
Hides the pivot items collection
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const pivotRows = this.$refs.myPivotGrid.getInstance().getPivotRows();
pivotRows.hide();
pivotRows.refresh();
setTimeout(_ => {
pivotRows.show();
pivotRows.refresh();
}, 2000)
}
}
</script>
|
||
| refresh | None | |
|
Refreshes the content of the pivot items collection
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const pivotRows = this.$refs.myPivotGrid.getInstance().getPivotRows();
pivotRows.hide();
pivotRows.refresh();
setTimeout(_ => {
pivotRows.show();
pivotRows.refresh();
}, 2000)
}
}
</script>
|
||
| getHierarchyDepth | Number | |
|
Returns the depth of the collection
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const pivotRows = this.$refs.myPivotGrid.getInstance().getPivotRows();
const hierarchyDepth = pivotRows.getHierarchyDepth();
}
}
</script>
|
||
| autoResize | autoResizeMode | None |
|
Auto resizes the pivot items collection.
autoResizeMode: "default", "fitAll", "fitItemContent" <template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const pivotRows = this.$refs.myPivotGrid.getInstance().getPivotRows();
pivotRows.autoResize('fitItemContent');
}
}
</script>
|
||
| getSortItem | Object | |
|
Returns the sort item of the collection
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" @sortchanged="sortchanged" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
methods: {
sortchanged: function () {
const sortItem = this.$refs.myPivotGrid.getPivotRows().getSortItem();
}
}
}
</script>
|
||
| getSortOrder | Object | |
|
Returns the sort order of the collection
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" @sortchanged="sortchanged" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
methods: {
sortchanged: function () {
const sortItem = this.$refs.myPivotGrid.getPivotRows().getSortOrder();
}
}
}
</script>
|
||
| sortBy | pivotItem, sortOrder | None |
|
Sorts the items collection
|
||
| removeSort | None | |
|
Removes the sort order of the collection
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" @sortchanged="sortchanged" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
methods: {
sortchanged: function () {
setTimeout(_ => this.$refs.myPivotGrid.getPivotRows().removeSort(), 2000);
}
}
}
</script>
|
||
| selectItem | pivotItem | None |
|
Selects a pivot item
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const pivotRows = this.$refs.myPivotGrid.getInstance().getPivotRows();
pivotRows.selectItem(pivotRows.items[1])
pivotRows.refresh();
}
}
</script>
|
||
| unselectItem | pivotItem | None |
|
Clears the selection of a pivot item
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const pivotRows = this.$refs.myPivotGrid.getInstance().getPivotRows();
pivotRows.selectItem(pivotRows.items[1])
pivotRows.refresh();
setTimeout(_ => {
pivotRows.unselectItem(pivotRows.items[1])
pivotRows.refresh();
}, 2000)
}
}
</script>
|
||
| clearSelection | None | |
|
Clears the selection of all items in the collection
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
mounted: function () {
const pivotRows = this.$refs.myPivotGrid.getInstance().getPivotRows();
pivotRows.selectItem(pivotRows.items[1])
pivotRows.refresh();
setTimeout(_ => {
pivotRows.clearSelection();
pivotRows.refresh();
}, 2000)
}
}
</script>
|
||
| getSelectedItems | Array | |
|
Returns all selected items in an array
<template>
<div>
<JqxPivotGrid ref="myPivotGrid"
:source="source" :autoResize="true" />
<br />
<p>Select several rows(CTRL + mousedown) and then click the button.</p>
<button @click="getSelectedItems()">Get Selected Items</button>
<p id="panel"></p>
</div>
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
},
methods: {
getSelectedItems: function () {
const items = this.$refs.myPivotGrid.getPivotRows().getSelectedItems();
document.querySelector('#panel').innerHTML = items;
}
}
}
</script>
|
||
| Name | Type | Default |
|---|---|---|
| pivotValuesOnRows | Boolean | false |
|
Determines whether the pivot values will be displayed on rows or columns.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
// Pivot Grid Values On Rows
pivotValuesOnRows: false,
// Pivot Grid Rows
rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
// Pivot Grid Columns
columns: [{ dataField: 'productname' }],
// Pivot Grid Filters
filters: [
{
dataField: 'productname',
filterFunction: function (value) {
if (value == 'Black Tea' || value == 'Green Tea')
return true;
return false;
}
}
],
// Pivot Grid Values
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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
}
}
</script>
|
||
| rows | Boolean | [] |
|
A list of data fields which will be used to build the pivot rows.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
// Pivot Grid Values On Rows
pivotValuesOnRows: false,
// Pivot Grid Rows
rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
// Pivot Grid Columns
columns: [{ dataField: 'productname' }],
// Pivot Grid Filters
filters: [
{
dataField: 'productname',
filterFunction: function (value) {
if (value == 'Black Tea' || value == 'Green Tea')
return true;
return false;
}
}
],
// Pivot Grid Values
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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
}
}
</script>
|
||
| columns | Boolean | [] |
|
A list of data fields which will be used to build the pivot columns.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
// Pivot Grid Values On Rows
pivotValuesOnRows: false,
// Pivot Grid Rows
rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
// Pivot Grid Columns
columns: [{ dataField: 'productname' }],
// Pivot Grid Filters
filters: [
{
dataField: 'productname',
filterFunction: function (value) {
if (value == 'Black Tea' || value == 'Green Tea')
return true;
return false;
}
}
],
// Pivot Grid Values
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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
}
}
</script>
|
||
| values | Boolean | [] |
|
A list of data fields which will be used to build the pivot values.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
// Pivot Grid Values On Rows
pivotValuesOnRows: false,
// Pivot Grid Rows
rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
// Pivot Grid Columns
columns: [{ dataField: 'productname' }],
// Pivot Grid Filters
filters: [
{
dataField: 'productname',
filterFunction: function (value) {
if (value == 'Black Tea' || value == 'Green Tea')
return true;
return false;
}
}
],
// Pivot Grid Values
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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
}
}
</script>
|
||
| filters | Boolean | [] |
|
A list of filters to apply on the source records while building the pivot table.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
// Pivot Grid Values On Rows
pivotValuesOnRows: false,
// Pivot Grid Rows
rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
// Pivot Grid Columns
columns: [{ dataField: 'productname' }],
// Pivot Grid Filters
filters: [
{
dataField: 'productname',
filterFunction: function (value) {
if (value == 'Black Tea' || value == 'Green Tea')
return true;
return false;
}
}
],
// Pivot Grid Values
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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
}
}
</script>
|
||
| theme | String | '' |
|
Sets the widget's theme. Include the theme's CSS file after jqx.base.css. <template>
<JqxPivotGrid ref="myPivotGrid"
:source="source" :autoResize="true" :theme="'material'"
/>
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
}
}
</script>
|
||
| Name | Type | Default |
|---|---|---|
| dataField | String | undefined |
|
The dataField in the data source used for this pivot field.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname', text: 1111, align: 'left', className: 'red', classNameSelected: 'blue' }, { 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
}
}
</script>
<style>
.red {
color: white;
background-color: red;
}
.blue {
color: white;
background-color: blue;
}
</style>
text String null
align String null
className String null
classNameSelected String null
Name of style to use when displaying this field on the pivot rows or columns and column or row is selected.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname', text: 1111, align: 'left', className: 'red', classNameSelected: 'blue' }, { 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', align: 'right',
className: 'red', classNameSelected: 'blue',
cellsClassName: 'green', cellsClassNameSelected: 'yellow',
formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' }
},
{ dataField: 'price', 'function': 'count', text: 'count' },
{ dataField: 'quantity', text: 'variance', 'function': 'var', formatSettings: { decimalPlaces: 2 } }
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
}
}
</script>
<style>
.red {
color: white;
background-color: red;
}
.blue {
color: white;
background-color: blue;
}
.green {
color: white;
background-color: green;
}
.yellow {
color: white;
background-color: yellow;
}
</style>
|
||
| function | String | Function | undefined |
|
The data aggregation function to use when calculating the cells values. You can either use the name of one of the built in functions like 'sum', 'count', 'min', 'max', 'product', 'average' or provide the implementation of your own function.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname', text: 1111, align: 'left', className: 'red', classNameSelected: 'blue' }, { 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
}
}
</script>
<style>
.red {
color: white;
background-color: red;
}
.blue {
color: white;
background-color: blue;
}
</style>
text String null
align String null
className String null
classNameSelected String null
Name of style to use when displaying this field on the pivot rows or columns and column or row is selected.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname', text: 1111, align: 'left', className: 'red', classNameSelected: 'blue' }, { 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', align: 'right',
className: 'red', classNameSelected: 'blue',
cellsClassName: 'green', cellsClassNameSelected: 'yellow',
formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' }
},
{ dataField: 'price', 'function': 'count', text: 'count' },
{ dataField: 'quantity', text: 'variance', 'function': 'var', formatSettings: { decimalPlaces: 2 } }
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
}
}
</script>
<style>
.red {
color: white;
background-color: red;
}
.blue {
color: white;
background-color: blue;
}
.green {
color: white;
background-color: green;
}
.yellow {
color: white;
background-color: yellow;
}
</style>
|
||
| text | String | undefined |
|
The text which will appear in the pivot designer when using this field.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname', text: 1111, align: 'left', className: 'red', classNameSelected: 'blue' }, { 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
}
}
</script>
<style>
.red {
color: white;
background-color: red;
}
.blue {
color: white;
background-color: blue;
}
</style>
text String null
align String null
className String null
classNameSelected String null
Name of style to use when displaying this field on the pivot rows or columns and column or row is selected.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname', text: 1111, align: 'left', className: 'red', classNameSelected: 'blue' }, { 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', align: 'right',
className: 'red', classNameSelected: 'blue',
cellsClassName: 'green', cellsClassNameSelected: 'yellow',
formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' }
},
{ dataField: 'price', 'function': 'count', text: 'count' },
{ dataField: 'quantity', text: 'variance', 'function': 'var', formatSettings: { decimalPlaces: 2 } }
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
}
}
</script>
<style>
.red {
color: white;
background-color: red;
}
.blue {
color: white;
background-color: blue;
}
.green {
color: white;
background-color: green;
}
.yellow {
color: white;
background-color: yellow;
}
</style>
|
||
| align | String | undefined |
|
Text alignment when the value of this field is displayed on the pivot rows or pivot columns.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname', text: 1111, align: 'left', className: 'red', classNameSelected: 'blue' }, { 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
}
}
</script>
<style>
.red {
color: white;
background-color: red;
}
.blue {
color: white;
background-color: blue;
}
</style>
text String null
align String null
className String null
classNameSelected String null
Name of style to use when displaying this field on the pivot rows or columns and column or row is selected.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname', text: 1111, align: 'left', className: 'red', classNameSelected: 'blue' }, { 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', align: 'right',
className: 'red', classNameSelected: 'blue',
cellsClassName: 'green', cellsClassNameSelected: 'yellow',
formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' }
},
{ dataField: 'price', 'function': 'count', text: 'count' },
{ dataField: 'quantity', text: 'variance', 'function': 'var', formatSettings: { decimalPlaces: 2 } }
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
}
}
</script>
<style>
.red {
color: white;
background-color: red;
}
.blue {
color: white;
background-color: blue;
}
.green {
color: white;
background-color: green;
}
.yellow {
color: white;
background-color: yellow;
}
</style>
|
||
| className | String | undefined |
|
Name of style to use when displaying this field on the pivot rows or columns.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname', text: 1111, align: 'left', className: 'red', classNameSelected: 'blue' }, { 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
}
}
</script>
<style>
.red {
color: white;
background-color: red;
}
.blue {
color: white;
background-color: blue;
}
</style>
text String null
align String null
className String null
classNameSelected String null
Name of style to use when displaying this field on the pivot rows or columns and column or row is selected.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname', text: 1111, align: 'left', className: 'red', classNameSelected: 'blue' }, { 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', align: 'right',
className: 'red', classNameSelected: 'blue',
cellsClassName: 'green', cellsClassNameSelected: 'yellow',
formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' }
},
{ dataField: 'price', 'function': 'count', text: 'count' },
{ dataField: 'quantity', text: 'variance', 'function': 'var', formatSettings: { decimalPlaces: 2 } }
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
}
}
</script>
<style>
.red {
color: white;
background-color: red;
}
.blue {
color: white;
background-color: blue;
}
.green {
color: white;
background-color: green;
}
.yellow {
color: white;
background-color: yellow;
}
</style>
|
||
| classNameSelected | String | undefined |
|
Name of style to use when displaying this field on the pivot rows or columns and column or row is selected.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname', text: 1111, align: 'left', className: 'red', classNameSelected: 'blue' }, { 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
}
}
</script>
<style>
.red {
color: white;
background-color: red;
}
.blue {
color: white;
background-color: blue;
}
</style>
text String null
align String null
className String null
classNameSelected String null
Name of style to use when displaying this field on the pivot rows or columns and column or row is selected.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname', text: 1111, align: 'left', className: 'red', classNameSelected: 'blue' }, { 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', align: 'right',
className: 'red', classNameSelected: 'blue',
cellsClassName: 'green', cellsClassNameSelected: 'yellow',
formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' }
},
{ dataField: 'price', 'function': 'count', text: 'count' },
{ dataField: 'quantity', text: 'variance', 'function': 'var', formatSettings: { decimalPlaces: 2 } }
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
}
}
</script>
<style>
.red {
color: white;
background-color: red;
}
.blue {
color: white;
background-color: blue;
}
.green {
color: white;
background-color: green;
}
.yellow {
color: white;
background-color: yellow;
}
</style>
|
||
| cellsClassName | String | undefined |
|
Name of style to use when displaying the cells of this pivot value field.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname', text: 1111, align: 'left', className: 'red', classNameSelected: 'blue' }, { 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
}
}
</script>
<style>
.red {
color: white;
background-color: red;
}
.blue {
color: white;
background-color: blue;
}
</style>
text String null
align String null
className String null
classNameSelected String null
Name of style to use when displaying this field on the pivot rows or columns and column or row is selected.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname', text: 1111, align: 'left', className: 'red', classNameSelected: 'blue' }, { 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', align: 'right',
className: 'red', classNameSelected: 'blue',
cellsClassName: 'green', cellsClassNameSelected: 'yellow',
formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' }
},
{ dataField: 'price', 'function': 'count', text: 'count' },
{ dataField: 'quantity', text: 'variance', 'function': 'var', formatSettings: { decimalPlaces: 2 } }
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
}
}
</script>
<style>
.red {
color: white;
background-color: red;
}
.blue {
color: white;
background-color: blue;
}
.green {
color: white;
background-color: green;
}
.yellow {
color: white;
background-color: yellow;
}
</style>
|
||
| cellsClassNameSelected | String | undefined |
|
Name of style to use when displaying this cells this pivot value field when the cells are selected.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname', text: 1111, align: 'left', className: 'red', classNameSelected: 'blue' }, { 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
}
}
</script>
<style>
.red {
color: white;
background-color: red;
}
.blue {
color: white;
background-color: blue;
}
</style>
text String null
align String null
className String null
classNameSelected String null
Name of style to use when displaying this field on the pivot rows or columns and column or row is selected.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname', text: 1111, align: 'left', className: 'red', classNameSelected: 'blue' }, { 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', align: 'right',
className: 'red', classNameSelected: 'blue',
cellsClassName: 'green', cellsClassNameSelected: 'yellow',
formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' }
},
{ dataField: 'price', 'function': 'count', text: 'count' },
{ dataField: 'quantity', text: 'variance', 'function': 'var', formatSettings: { decimalPlaces: 2 } }
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
}
}
</script>
<style>
.red {
color: white;
background-color: red;
}
.blue {
color: white;
background-color: blue;
}
.green {
color: white;
background-color: green;
}
.yellow {
color: white;
background-color: yellow;
}
</style>
|
||
| formatSettings | Object | {} |
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname', text: 1111, align: 'left', className: 'red', classNameSelected: 'blue' }, { 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 }
}
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
}
}
</script>
<style>
.red {
color: white;
background-color: red;
}
.blue {
color: white;
background-color: blue;
}
</style>
text String null
align String null
className String null
classNameSelected String null
Name of style to use when displaying this field on the pivot rows or columns and column or row is selected.
<template>
<JqxPivotGrid ref="myPivotGrid" :source="source" :autoResize="true" />
</template>
<script>
import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
export default {
components: {
JqxPivotGrid
},
beforeCreate: function () {
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = ['Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi'];
const lastNames = ['Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase'];
const productNames = ['Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte'];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const 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
const 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' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname', text: 1111, align: 'left', className: 'red', classNameSelected: 'blue' }, { 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', align: 'right',
className: 'red', classNameSelected: 'blue',
cellsClassName: 'green', cellsClassNameSelected: 'yellow',
formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' }
},
{ dataField: 'price', 'function': 'count', text: 'count' },
{ dataField: 'quantity', text: 'variance', 'function': 'var', formatSettings: { decimalPlaces: 2 } }
]
}
);
return pivotDataSource;
}
this.source = createPivotDataSource();
}
}
</script>
<style>
.red {
color: white;
background-color: red;
}
.blue {
color: white;
background-color: blue;
}
.green {
color: white;
background-color: green;
}
.yellow {
color: white;
background-color: yellow;
}
</style>
|
||
| Name | Type | Default |
|---|---|---|
| x | Number | null |
|
X coordinate
|
||
| y | Number | null |
|
Y coordinate
|
||