Treemap Demo

author(s): Jon Arild Nygård

by Nilesh Ramteke

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<div id="container"></div>

CSS

#container {
    min-width: 300px;
    max-width: 600px;
    margin: 0 auto;
}

JavaScript

var data = {
         
        'Americas': {
            
        },
        'Eastern Mediterranean': {
            
        },
        'Western Pacific': {
            
        }
    },
    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',
       ...