Showing Percentages On Treemap
One of the requests that have come up is the ability to show percentages on a tree map without needing to hover over the widget with a tooltip.
The following code overwrites the 'name' displayed with 'name' + percentage to three decimal places:
- The percentage is calculated based on the values on the widget at present, and supports nested levels.
- Obviously, datastructure[j]['name'] could also be replaced by name + value, or name + value +percentage.
widget.on('processresult', function(sender, e) {
function typecheck(item) {
if (item instanceof Array) {
result = 'Array'
} else {
if (item instanceof Object) {
result = 'Object'
}
}
return result;
}
function loop(datastructure) {
levelSize = 0
if (typecheck(datastructure) == 'Array') {
for (var i = 0; i < datastructure.length; i++) {
if (typecheck(datastructure[i]) == 'Object') {
levelSize = levelSize + datastructure[i]['size'];
if (datastructure[i]['_depth'] == 1) {
topSize = levelSize
}
}
}
for (var j = 0; j < datastructure.length; j++) {
if (typecheck(datastructure[j]) == 'Object') {
datastructure[j]['levelsize'] = levelSize;
datastructure[j]['levelpercentage'] = datastructure[j]['size'] / topSize;
levelpc100 = datastructure[j]['levelpercentage'] * 100
datastructure[j]['name'] = datastructure[j]['data'] + ' - ' + levelpc100.toLocaleString({
style: 'percent',
maximumSignificantDigits: 2
}) + ' %'
}
}
for (var k = 0; k < datastructure.length; k++) {
if (typeof(datastructure[k]['children']) !== 'undefined') {
datastructure[k]['children'] = loop(datastructure[k]['children'])
}
}
return datastructure;
}
}
loop(e.result.children)
})Updated 03-02-2023
