Treemap Demo

author(s): Jon Arild Nygård

by arjunasuresh3

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script><script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
<button id="button" class="autocompare">Set new data</button>

CSS

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

JavaScript

var chart = Highcharts.chart('container', {
    series: [{
        type: "treemap",
        layoutAlgorithm: 'squarified',
        allowDrillToNode: true,
        data: [{
            id: "id_1",
            name: 'A'
        }, {
            id: "id_2",
            name: 'A1',
            value: 2,
            parent: 'id_1'
        }, {
            id: "id_3",
            name: 'A2',
            value: 2,
            parent: 'id_1'
        }, {
            id: "id_4",
            name: 'A3',
            value: 2,
            parent: 'id_1'
        }, {id: "id_5",
            name: 'B',
            value: 6
        }, {
            name: 'C',
            value: 4
        }, {
            name: 'D',
            value: 3
        }, {
            name: 'E',
            value: 2
        }, {
            name: 'F',
            value: 2
        }, {
            name: 'G',
            value: 1
        }]
    }],
    title: {
        text: 'Highcharts Treemap'
    },
    subtitle: {
        text: 'The A node has children (A1-A3) and allows drilling'
    }
});
// the button action
$('#button').click(function () {
//debugger;
var newData = [ {
            
            name: 'B1',
            value: 2,
            parent: 'id_5'
        }, {
            
            name: 'B2',
            value: 2,
            parent: 'id_5'
        }, {
            
            name: 'B3',
            value: 2,
            parent: 'id_5'
        }] 
var data = chart.series[0].options.data;
data.push.apply(data, newData);
    chart.series[0].setData(data);
});