var DemoApp = angular.module('DemoApp', ['dx']);
DemoApp.controller('DemoController', function DemoController($scope) {
var algorithms = ["sliceAndDice", "squarified", "strip", "custom"];
$scope.currentAlgorithmName = algorithms[2];
$scope.currentAlgorithm = $scope.currentAlgorithmName;
$scope.treeMapOptions = {
bindingOptions: {
layoutAlgorithm: "currentAlgorithm",
},
dataSource: populationByAge,
colorizer: {
type: "discrete",
colorizeGroups: true
},
title: "Population by Age Groups",
tooltip: {
enabled: true,
format: "thousands",
customizeTooltip: function (arg) {
var data = arg.node.data,
parentData = arg.node.getParent().data,
result = "";
if (arg.node.isLeaf()) {
result = "<span class='country'>" + parentData.name + "</span><br />" +
data.name + "<br />" + arg.valueText + " (" +
(100 * data.value/parentData.total).toFixed(1) + "%)";
} else {
result = "<span class='country'>" + data.name + "</span>";
}
return {
text: result
};
}
}
};
$scope.selectBoxOptions = {
bindingOptions: {
value: "currentAlgorithmName"
},
items: algorithms,
width: 200,
onValueChanged: function(data) {
if(data.value == "custom") {
$scope.currentAlgorithm = customAlgorithm;
} else {
$scope.currentAlgorithm = data.value;
}
}
};
function customAlgorithm(arg) {
var side = 0,
totalRect = arg.rect.slice(),
totalSum = arg.sum;
arg.items.forEach(function (item) {
var size = Math.round((totalRect[side + 2] -
totalRect[side]) * item.value / totalSum),
rect = totalRect.slice();
totalSum -= item.value;
rect[side + 2] = totalRect[side] = totalRect[side] + size;
item.rect = rect;
side = 1 - side;
});
}
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx.light.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdn3.devexpress.com/jslib/20.2.5/js/dx.all.js"></script>
<script src="data.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container" ng-app="DemoApp" ng-controller="DemoController">
<div id="treemap" dx-tree-map="treeMapOptions"></div>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<span>Tiling Algorithm</span>
<div dx-select-box="selectBoxOptions" class="selectbox"></div>
</div>
</div>
</div>
</body>
</html>
#treemap {
height: 460px;
}
.country {
font-weight: 500;
}
.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
margin-top: 20px;
}
.option {
margin-top: 10px;
}
.caption {
font-size: 18px;
font-weight: 500;
}
.option > span {
margin-right: 10px;
}
.option > .dx-widget {
display: inline-block;
vertical-align: middle;
}
var populationByAge = [{
"name": "Brazil",
"total": 200050486,
"items": [{
"name": "Age 0-14",
"value": 48058462
}, {
"name": "Age 15-44",
"value": 96036995
}, {
"name": "Age 45-64",
"value": 40715296
}, {
"name": "Age 65+",
"value": 15239733
}]
}, {
"name": "Japan",
"total": 126345237,
"items": [{
"name": "Age 0-14",
"value": 16593766
}, {
"name": "Age 15-44",
"value": 45455276
}, {
"name": "Age 45-64",
"value": 32845790
}, {
"name": "Age 65+",
"value": 31450405
}]
}, {
"name": "United States",
"total": 318497627,
"items": [{
"name": "Age 0-14",
"value": 63968935
}, {
"name": "Age 15-44",
"value": 127217843
}, {
"name": "Age 45-64",
"value": 83145484
}, {
"name": "Age 65+",
"value": 44165365
}]
}];