Plain Data Structure
Documentation
In this demo, the TreeMap widget accepts a data source of a plain structure.
www.wikipedia.org
window.onload = function() {
var viewModel = {
treeMapOptions: {
dataSource: citiesPopulation,
title: "The Most Populated Cities by Continents",
resolveLabelOverflow: "ellipsis",
idField: "id",
parentField: "parentId",
tooltip: {
enabled: true,
format: "thousands",
customizeTooltip: function (arg) {
var data = arg.node.data,
result = null;
if (arg.node.isLeaf()) {
result = "<span class='city'>" + data.name + "</span> (" +
data.country + ")<br/>Population: " + arg.valueText;
}
return {
text: result
};
}
},
size: {
height: 500
}
}
};
ko.applyBindings(viewModel, document.getElementById("treemap-demo"));
};
<!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.1.0/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/event.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/supplemental.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/unresolved.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/message.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/number.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/currency.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/date.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/18.2.3/css/dx.common.css" />
<link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/18.2.3/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/18.2.3/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">
<div id="treemap-demo">
<div data-bind="dxTreeMap: treeMapOptions"></div>
</div>
</div>
</body>
</html>
.city {
font-weight: 500;
}
var citiesPopulation = [{
id: "1",
name: "Africa"
}, {
id: "1_1",
parentId: "1",
value: 21324000,
name: "Lagos",
country: "Nigeria"
}, {
id: "1_2",
parentId: "1",
value: 9735000,
name: "Kinshasa",
country: "Democratic Republic of the Congo"
}, {
id: "1_3",
parentId: "1",
value: 9278441,
name: "Cairo",
country: "Egypt"
}, {
id: "2",
name: "Asia"
}, {
id: "2_1",
parentId: "2",
value: 24256800,
name: "Shanghai",
country: "China"
}, {
id: "2_2",
parentId: "2",
value: 23500000,
name: "Karachi",
country: "Pakistan"
}, {
id: "2_3",
parentId: "2",
value: 21516000,
name: "Beijing",
country: "China"
}, {
id: "2_4",
parentId: "2",
value: 16787941,
name: "Delhi",
country: "India"
}, {
id: "2_5",
parentId: "2",
value: 15200000,
name: "Tianjin",
country: "China"
}, {
id: "3",
name: "Australia"
}, {
id: "3_1",
parentId: "3",
value: 4840600,
name: "Sydney",
country: "Austraila"
}, {
id: "3_2",
parentId: "3",
value: 4440000,
name: "Melbourne",
country: "Austraila"
}, {
id: "4",
name: "Europe"
}, {
id: "4_1",
parentId: "4",
value: 14160467,
name: "Istanbul",
country: "Turkey"
}, {
id: "4_2",
parentId: "4",
value: 12197596,
name: "Moscow",
country: "Russia"
}, {
id: "4_3",
parentId: "4",
value: 8538689,
name: "London",
country: "United Kingdom"
}, {
id: "4_4",
parentId: "4",
value: 5191690,
name: "Saint Petersburg",
country: "Russia"
}, {
id: "4_5",
parentId: "4",
value: 4470800,
name: "Ankara",
country: "Turkey"
}, {
id: "4_6",
parentId: "4",
value: 3517424,
name: "Berlin",
country: "Germany"
}, {
id: "5",
name: "North America"
}, {
id: "5_1",
parentId: "5",
value: 8874724,
name: "Mexico City",
country: "Mexico"
}, {
id: "5_2",
parentId: "5",
value: 8550405,
name: "New York City",
country: "United States"
}, {
id: "5_3",
parentId: "5",
value: 3884307,
name: "Los Angeles",
country: "United States"
}, {
id: "5_4",
parentId: "5",
value: 2808503,
name: "Toronto",
country: "Canada"
}, {
id: "6",
name: "South America"
}, {
id: "6_1",
parentId: "6",
value: 11895893,
name: "São Paulo",
country: "Brazil"
}, {
id: "6_2",
parentId: "6",
value: 8693387,
name: "Lima",
country: "Peru"
}, {
id: "6_3",
parentId: "6",
value: 7776845,
name: "Bogotá",
country: "Colombia"
}, {
id: "6_4",
parentId: "6",
value: 6429923,
name: "Rio de Janeiro",
country: "Brazil"
}];