I need to develop icicle chart using HighCharts

Question

HI can I tweak tree map and do it ? I can pass all data hierarchy . its already implemented in d3 . Can i use/tweak Any properties of highcharts to render icicle ?

Answer 1

You could use heatmap - see this SO question: Creating ICICLE Chart using Highcharts Library

Other way would be to use treemap. Unfortunately there is no default layout algorithm that would enable icicle chart, so it would have to be created.

How to create custom layout algorithm: http://www.highcharts.com/docs/chart-and-series-types/treemap

For icicle it will be better if children passed to layout algorithm will be unsorted. Feature can be changed by wrapping setTreeValues function.

Example: http://jsfiddle.net/c6bo2asn/

$(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 + widthSoFar,
                    y: parent.y,
                    width: child.name === '_empty' ? 0 : w,
                    height: parent.height
                });
                widthSoFar += w;
            }
        });
        return childrenAreas;
    }
    //end layoutAlgorithm logic
    //assign new layoutAlgorithm logic
    Highcharts.seriesTypes.treemap.prototype.icicle = myFunction;
    //create chart
    $('#container').highcharts({
        series: [{
            type: "treemap",
            layoutAlgorithm: 'icicle',
            dataLabels: {
                formatter: function(){
                    //hide _empty
                    return this.key === '_empty' ? '' : this.key;
                },
                rotation: -90
            },
            borderWidth: 0,
            levels: [{
                level: 2,
                borderWidth: 1
            }],
            /*
            level 1 data points are lines
            */
            data: [{
                id: 'top',
                color: "#EC2500"
            }, {
                name: 'a Anne',
                parent: 'top',
                value: 50
            }, {
                name: 'a Rick',
                parent: 'top',
                value: 30
            }, {
                name: 'a Peter',
                parent: 'top',
                value: 20
            }, {
                id: 'second'
            }, {
                name: 'b Anne',
                parent: 'second',
                value: 30,
                color: "#ECE100"
            }, {
                name: '_empty',
                parent: 'second',
                value: 20
            }, {
                name: 'b Peter',
                parent: 'second',
                value: 30,
                color: "#EC9800"
            }, {
                name: '_empty',
                parent: 'second',
                value: 20
            }, {
                id: 'third',
                color: '#EC9800'
            }, {
                name: 'o Anne',
                parent: 'third',
                value: 20
            }, {
                name: 'o Rick',
                parent: 'third',
                value: 10
            }, {
                name: '_empty',
                parent: 'third',
                value: 70
            }, {
                id: 'last',
                color: '#669866'
            }, {
                name: '_empty',
                parent: 'last',
                value: 20
            }, {
                name: 'z Anne',
                parent: 'last',
                value: 10
            }, {
                name: '_empty',
                parent: 'last',
                value: 70
            }]
        }],
        title: {
            text: 'Fruit consumption'
        }
    });
});