PivotGrid Outline Mode
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.mescius.com/wijmo/5.latest/styles/wijmo.css">
<script src="https://cdn.mescius.com/wijmo/5.latest/controls/wijmo.js"></script>
<script src="https://cdn.mescius.com/wijmo/5.latest/controls/wijmo.input.js"></script>
<script src="https://cdn.mescius.com/wijmo/5.latest/controls/wijmo.grid.filter.js"></script>
<script src="https://cdn.mescius.com/wijmo/5.latest/controls/wijmo.grid.js"></script>
<script src="https://cdn.mescius.com/wijmo/5.latest/controls/wijmo.olap.js"></script>
<div class="container">
<h1>Wijmo Olap Incorrect Average Issue</h1>
<p>
Fields Q1, Q2, Q3, Q4 and Q5 each have 2 data values greater than zero.
</p>
<p>
Fields Q6 and Q7 each have 1 data value greater than zero.
</p>
<p>
All fields have a filter to show all data values except zero.
</p>
<p>
All fields have aggregate set to average.
</p>
<p>
All fields have format set to n2.
</p>
<p>
The average is correct for each field when including Q1, Q2, Q3, Q4 and Q5 in the Values area of the pivot panel.
</p>
<p>
<strong>Observed incorrect behavior:</strong>
The average for Q3, Q4 and Q5 becomes incorrect when including Q6 or Q7 in the Values area of the pivot panel.
</p>
<p>
<strong>Expected behavior:</strong>
The average for Q3, Q4 and Q5 should not change and become incorrect if including Q6 or Q7 in the Values area of the pivot panel.
</p>
<div>
<div style="width: 30%; float: left;">
<div id="pivotPanel"></div>
</div>
<div style="width: 100%; float: left; overflow: auto;">
<div id="pivotGrid"></div>
</div>
</div>
</div>
CSS
.wj-pivotgrid {
max-height: 400px;
}
.wj-pivotpanel {
background: #eee;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.wj-pivotpanel .wj-flexgrid {
background: inherit;
}
.wj-pivotgrid .wj-cell.wj-header {
border-right: none;
}
body {
margin-bottom: 24pt;
}
JavaScript
onload = function() {
let panel;
let pivotGrid;
let data = getData();
let olapEngine;
panel = new wijmo.olap.PivotPanel("#pivotPanel");
olapEngine = panel.engine;
olapEngine.itemsSource = data;
olapEngine.valueFields = [];
olapEngine.valueFields.push('Q1');
olapEngine.valueFields.push('Q2');
olapEngine.valueFields.push('Q3');
olapEngine.valueFields.push('Q4');
olapEngine.valueFields.push('Q5');
//olapEngine.valueFields.push('Q6');
//olapEngine.valueFields.push('Q7');
olapEngine.valueFields[0].aggregate = wijmo.Aggregate.Avg;
olapEngine.valueFields[1].aggregate = wijmo.Aggregate.Avg;
olapEngine.valueFields[2].aggregate = wijmo.Aggregate.Avg;
olapEngine.valueFields[3].aggregate = wijmo.Aggregate.Avg;
olapEngine.valueFields[4].aggregate = wijmo.Aggregate.Avg;
olapEngine.fields[5].aggregate = wijmo.Aggregate.Avg;
olapEngine.fields[6].aggregate = wijmo.Aggregate.Avg;
olapEngine.valueFields[0].format = 'n2';
olapEngine.valueFields[1].format = 'n2';
olapEngine.valueFields[2].format = 'n2';
olapEngine.valueFields[3].format = 'n2';
olapEngine.valueFields[4].format = 'n2';
olapEngine.fields[5].format = 'n2';
olapEngine.fields[6].format = 'n2';
olapEngine.valueFields[0].filter.valueFilter.showValues = {'4.00': true};
olapEngine.valueFields[1].filter.valueFilter.showValues = {'5.00': true};
olapEngine.valueFields[2].filter.valueFilter.showValues = {'4.00': true, '5.00': true};
olapEngine.valueFields[3].filter.valueFilter.showValues = {'4.00': true, '5.00': true};
olapEngine.valueFields[4].filter.valueFilter.showValues = {'4.00': true, '5.00': true};
olapEngine.fields[5].filter.valueFilter.showValues = {'5.00': true};
olapEngine.fields[6].filter.valueFilter.showValues = {'5.00': true};
pivotGrid = new wijmo.olap.PivotGrid("#pivotGrid", {
itemsSource: panel,
showSelectedHeaders: 'All'
});
function getData() {
let data = [];
//1
data.push({
Q1: 0,
...