⏱️ 4 minute read
Here are a few ready-to-use widget scripts to reorder or remove elements in your widget.
Replace the variables highlighted in bold with the appropriate values for your use case.
- Hide one or more columns in a table
- Hide empty columns in a table
- Rename X-axis labels in charts
- Offset week numbering in column/bar charts
- Offset week numbering in pivot tables
Hide one or more columns in a table
columnsToHide = [2,3] //specify the column(s) to hide (first column = 0)
widget.transformPivot(
{},
function (metadata, cell)
{
columnsToHide.forEach(function(col) {
if (metadata.colIndex == col) { // Add a second condition ( && metadata.rowIndex > 0 ) if you want to keep the table header
cell.content = ' '
cell.style = {
maxWidth: '0px',
borderColor: 'white',
color: 'white'
}
}
})
}
);
Hide empty columns in a table
widget.on('ready', function(se, ev){
var widgetContainer = $(element); // Get the container for the current widget
var hideInterval;function findAndHideEmptyColumns() {
// Find tables only within the current widget container
var tables = widgetContainer.find('table');tables.each(function() {
var table = this;
if (!table.rows || table.rows.length < 2) return;var maxCols = Math.max(...Array.from(table.rows).map(row => row.cells ? row.cells.length : 0));
if (maxCols <= 1) return;
// Check each column for emptiness
for (let colIndex = 1; colIndex < maxCols; colIndex++) {
if (isColumnEmpty(table, colIndex)) {
hideColumn(table, colIndex);
}
}
});
}function isColumnEmpty(table, colIndex) {
var hasData = false;
var cellCount = 0;// Check data rows (skip first row which is usually header)
for (let rowIndex = 1; rowIndex < table.rows.length; rowIndex++) {
if (!table.rows[rowIndex] || !table.rows[rowIndex].cells) continue;var cell = table.rows[rowIndex].cells[colIndex];
if (cell) {
cellCount++;
var text = (cell.textContent || cell.innerText || '').trim();if (text && text !== '' && text !== '-' && text !== '0' && text !== 'N/A' && text !== 'null' && text !== 'undefined') {
hasData = true;
break;
}
}
}
return !hasData && cellCount > 0;
}function hideColumn(table, colIndex) {
// Hide all cells in this column
for (let rowIndex = 0; rowIndex < table.rows.length; rowIndex++) {
if (!table.rows[rowIndex] || !table.rows[rowIndex].cells) continue;
var cell = table.rows[rowIndex].cells[colIndex];
if (cell) {
cell.style.display = 'none';
}
}// Hide the column header
var headerCell = table.rows[0].cells[colIndex];
if(headerCell) {
headerCell.style.display = 'none';
}
}// Initial run and continuous monitoring
findAndHideEmptyColumns();hideInterval = setInterval(findAndHideEmptyColumns, 500); // Check every 500ms
// Clean up when the widget is destroyed or refreshed
widget.on('domReady', function() {
clearInterval(hideInterval);
});widget.on('beforeunload', function() {
clearInterval(hideInterval);
});
});
Rename X-axis labels in charts
This script is useful if your fiscal year does not match the calendar year. You can rename quarters: 2025 Q1 instead of 2025 Q2, for example.
widget.on('processresult', function(widget,result) {
let dict =
//specify current label names and new label names
{ '2025 Q1':'2024 Q4',
'2025 Q2':'2025 Q1',
'2025 Q3':'2025 Q2',
'2025 Q4':'2025 Q3',
'2026 Q1':'2025 Q4',
'2026 Q2':'2026 Q1'
}
for (let i = 0 ; i < result.result.xAxis.categories.length ; i++) {
result.result.xAxis.categories[i] = dict[result.result.xAxis.categories[i]]
}
})
If the X-axis labels are in the "Break by" section (not in "Categories"), use this script instead:
widget.on('processresult', function(widget,result) {
let dict =
//specify current label names and new label names
{ '2025 Q1':'2024 Q4',
'2025 Q2':'2025 Q1',
'2025 Q3':'2025 Q2',
'2025 Q4':'2025 Q3',
'2026 Q1':'2025 Q4',
'2026 Q2':'2026 Q1'
}
result.result.series.forEach(function(ser) {
ser.name = dict[ser.name]
})
})
Offset week numbering in column/bar charts
This script will impact week numbering in the whole dashboard.
var observer = new MutationObserver(function(mutations) {
setTimeout(function() {
var xLabels = document.querySelectorAll('[class*="highcharts-xaxis-labels"] text');
xLabels.forEach(function(label) {
if (label.getAttribute('data-week-offset-applied')) {
return;
}
var text = label.textContent || label.innerText;
var parts = text.trim().split(' ');
if (parts.length === 2) {
var weekNum = parseInt(parts[0]);
var year = parts[1];
if (!isNaN(weekNum) && weekNum >= 1 && weekNum <= 53) {
weekNum = weekNum + 1; //specify the offset
if (weekNum > 53) {
weekNum = 1;
year = (parseInt(year) + 1).toString();
}
label.textContent = weekNum + ' ' + year;
label.setAttribute('data-week-offset-applied', 'true');
}
}
});
}, 100);
});observer.observe(document.body, {
childList: true,
subtree: true
});
Offset week numbering in pivot tables
This script will impact week numbering in the whole dashboard.
var observer = new MutationObserver(function(mutations) {
setTimeout(function() {
var allElements = document.querySelectorAll('*');
allElements.forEach(function(el) {
if (el.getAttribute('data-week-offset-applied')) {
return;
}
var text = (el.textContent || el.innerText || '').trim();
if (el.children.length > 0) {
return;
}
var parts = text.split(' ');
var hasTotal = parts[parts.length - 1] === 'Total';
var relevantParts = hasTotal ? parts.slice(0, -1) : parts;
if (relevantParts.length === 2) {
var weekNum = parseInt(relevantParts[0]);
var year = relevantParts[1];
if (!isNaN(weekNum) && weekNum >= 1 && weekNum <= 53) {
weekNum = weekNum + 1; //specify the offset
if (weekNum > 53) {
weekNum = 1;
year = (parseInt(year) + 1).toString();
}
var newText = weekNum + ' ' + year;
if (hasTotal) {
newText += ' Total';
}
el.textContent = newText;
el.setAttribute('data-week-offset-applied', 'true');
}
}
});
}, 100);
});observer.observe(document.body, {
childList: true,
subtree: true
});
Comments
0 comments
Please sign in to leave a comment.