Manage visibility of empty values
by Flexmonster Pivot Table
HTML
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<script src="https://cdn.flexmonster.com/lib/flexmonster.highcharts.js"></script>
<button onclick="turnOn()">Show empty values</button>
<button onclick="turnOff()">Hide empty values</button>
<button onclick="showInRows()">Show empty values in rows</button>
<button onclick="showInColumns()">Show empty values in columns</button>
<div id="pivot-container"></div>
CSS
@import url(https://cdn.flexmonster.com/assets/jsfiddle-styles.css);
JavaScript
var pivot = new Flexmonster({
container: "pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
toolbar: true,
report: {
dataSource: {
data: getData()
},
slice: {
columns: [
{
uniqueName: "Country"
},
{
uniqueName: '[Measures]'
}],
rows: [{
uniqueName: 'Year'
}],
measures: [{
uniqueName: 'Value',
}]
},
options: {
showEmptyValues: true
},
},
});
function turnOff() {
let options = pivot.getOptions();
options.showEmptyValues = false;
pivot.setOptions(options);
pivot.refresh();
}
function turnOn() {
let options = pivot.getOptions();
options.showEmptyValues = true;
pivot.setOptions(options);
pivot.refresh();
}
function showInRows() {
let options = pivot.getOptions();
options.showEmptyValues = "rows";
pivot.setOptions(options);
pivot.refresh();
}
function showInColumns() {
let options = pivot.getOptions();
options.showEmptyValues = "columns";
pivot.setOptions(options);
pivot.refresh();
}
function getData() {
return [{
"Year": "2020",
"Value": 20,
"Country": "United Kingdom"
},
{
"Year": "2021",
"Value": 21,
"Country": "United Kingdom"
},
{
"Year": "2022",
"Country": "United States"
},
{
"Year": "2023",
"Country": "United States"
},
{
"Year": "2024",
"Value": 26,
"Country": "United Kingdom"
},
];
}