Treemap Demo

author(s): Jon Arild Nygård

HTML

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

CSS

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

JavaScript

$(function () {
    //start wapper
    (function (H) {
        H.wrap(H.seriesTypes.treemap.prototype, 'setTreeValues', function (proceed) {
            var tree = arguments[1];
            //setTreeValues: function (tree) {
			var series = this,
				childrenTotal = 0,
				sorted = [],
				val,
				point = series.points[tree.i];

			// First give the children some values
			H.each(tree.children, function (child) {
				child = series.setTreeValues(child);
				series.insertElementSorted(sorted, child, function (el, el2) {
					return 0;//do not sort 
				});

				if (!child.ignore) {
					childrenTotal += child.val;
				} else {
					// @todo Add predicate to avoid looping already ignored children
					series.eachChildren(child, function (node) {
						H.extend(node, {
							ignore: true,
							isLeaf: false,
							visible: false
						});
					});
				}
			});

			// Set the values
			val = H.pick(point && point.value, childrenTotal);
			H.extend(tree, {
				children: sorted,
				childrenTotal: childrenTotal,
				// Ignore this node if point is not visible
				ignore: !(H.pick(point && point.visible, true) && (val > 0)),
				isLeaf: tree.visible && !childrenTotal,
				name: H.pick(point && point.name, ""),
				val: val
			});
			return tree;
		//},
        });
    }(Highcharts));    
    //end wapper
    //start layoutAlgorithm logic
    function myFunction(parent, children) {
        var childrenAreas = [],
            widthSoFar = 0,
            w;
        Highcharts.each(children, function (child,i) {
            if (child.level == 1) { //even lines
                childrenAreas.push({
                    x: parent.x,
                    y: parent.y + parent.height*(i/children.length),
                    width: parent.width,
                    height: parent.height/children.length
                });
            } else {
                w = parent.width * child.val/parent.val;
                childrenAreas.push({
                    x: parent.x +...