| Server IP : 182.53.201.61 / Your IP : 216.73.217.175 Web Server : Apache/2.2.15 (Fedora) System : Linux km10.dyndns.org 2.6.31.5-127.fc12.i686.PAE #1 SMP Sat Nov 7 21:25:57 EST 2009 i686 User : apache ( 48) PHP Version : 5.3.3 Disable Function : NONE MySQL : ON | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /var/www/html/temp/examples/treemap-large-dataset/ |
Upload File : |
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Highcharts Example</title>
<style type="text/css">
#container {
min-width: 300px;
max-width: 600px;
margin: 0 auto;
}
</style>
</head>
<body>
<script src="../../code/highcharts.js"></script>
<script src="../../code/modules/heatmap.js"></script>
<script src="../../code/modules/treemap.js"></script>
<div id="container"></div>
<script type="text/javascript">
$.getJSON('https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/world-mortality.json', function (data) {
var points = [],
regionP,
regionVal,
regionI = 0,
countryP,
countryI,
causeP,
causeI,
region,
country,
cause,
causeName = {
'Communicable & other Group I': 'Communicable diseases',
'Noncommunicable diseases': 'Non-communicable diseases',
'Injuries': 'Injuries'
};
for (region in data) {
if (data.hasOwnProperty(region)) {
regionVal = 0;
regionP = {
id: 'id_' + regionI,
name: region,
color: Highcharts.getOptions().colors[regionI]
};
countryI = 0;
for (country in data[region]) {
if (data[region].hasOwnProperty(country)) {
countryP = {
id: regionP.id + '_' + countryI,
name: country,
parent: regionP.id
};
points.push(countryP);
causeI = 0;
for (cause in data[region][country]) {
if (data[region][country].hasOwnProperty(cause)) {
causeP = {
id: countryP.id + '_' + causeI,
name: causeName[cause],
parent: countryP.id,
value: Math.round(+data[region][country][cause])
};
regionVal += causeP.value;
points.push(causeP);
causeI = causeI + 1;
}
}
countryI = countryI + 1;
}
}
regionP.value = Math.round(regionVal / countryI);
points.push(regionP);
regionI = regionI + 1;
}
}
Highcharts.chart('container', {
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
allowDrillToNode: true,
animationLimit: 1000,
dataLabels: {
enabled: false
},
levelIsConstant: false,
levels: [{
level: 1,
dataLabels: {
enabled: true
},
borderWidth: 3
}],
data: points
}],
subtitle: {
text: 'Click points to drill down. Source: <a href="http://apps.who.int/gho/data/node.main.12?lang=en">WHO</a>.'
},
title: {
text: 'Global Mortality Rate 2012, per 100 000 population'
}
});
});
</script>
</body>
</html>