var colors = Highcharts.getOptions().colors,
    sunburstData = [{
        name: "(anonymous)",
        id: "39",
        parent: "38",
        value: 16716,
        color: colors[0]
    }, {
        name: "a.objectEach",
        id: "38",
        parent: "37",
        value: 16716,
        color: colors[0]
    }, {
        name: "u",
        id: "37",
        parent: "36",
        value: 16716,
        color: colors[0]
    }, {
        name: "a.merge",
        id: "36",
        parent: "35",
        value: 16716,
        color: colors[0]
    }, {
        name: "setOptions",
        id: "35",
        parent: "34",
        value: 16716,
        color: colors[0]
    }, {
        name: "init",
        id: "34",
        parent: "33",
        value: 16716,
        color: colors[0]
    }, {
        name: "I",
        id: "33",
        parent: "32",
        value: 16716,
        color: colors[0]
    }, {
        name: "(anonymous)",
        id: "32",
        parent: "31",
        value: 16716,
        color: colors[0]
    }, {
        name: "forEach",
        id: "31",
        parent: "30",
        value: 33116,
        color: colors[2]
    }, {
        name: "getAxes",
        id: "30",
        parent: "20",
        value: 33116,
        color: colors[0]
    }, {
        name: "a.objectEach",
        id: "25",
        parent: "24",
        value: 16416,
        color: colors[0]
    }, {
        name: "attr",
        id: "24",
        parent: "23",
        value: 16416,
        color: colors[0]
    }, {
        name: "init",
        id: "23",
        parent: "22",
        value: 16416,
        color: colors[0]
    }, {
        name: "a.SVGRenderer",
        id: "22",
        parent: "21",
        value: 16416,
        color: colors[0]
    }, {
        name: "getContainer",
        id: "21",
        parent: "20",
        value: 32832,
        color: colors[0]
    }, {
        name: "forEach",
        id: "29",
        parent: "28",
        value: 16412,
        color: colors[2]
    }, {
        name: "(anonymous)",
        id: "28",
        parent: "27",
        value: 16412,
        color: colors[0]
    }, {
        name: "forEach",
        id: "27",
        parent: "26",
        value: 16412,
        color: colors[2]
    }, {
        name: "resetMargins",
        id: "26",
        parent: "20",
        value: 16412,
        color: colors[0]
    }, {
        name: "E.buildStacks",
        id: "83",
        parent: "82",
        value: 16872,
        color: colors[0]
    }, {
        name: "(anonymous)",
        id: "82",
        parent: "80",
        value: 16872,
        color: colors[0]
    }, {
        name: "a.fireEvent",
        id: "80",
        parent: "79",
        value: 33304,
        color: colors[0]
    }, {
        name: "getSeriesExtremes",
        id: "79",
        parent: "78",
        value: 33304,
        color: colors[0]
    }, {
        name: "setTickInterval",
        id: "81",
        parent: "78",
        value: 16632,
        color: colors[0]
    }, {
        name: "setScale",
        id: "78",
        parent: "77",
        value: 49936,
        color: colors[0]
    }, {
        name: "(anonymous)",
        id: "77",
        parent: "76",
        value: 49936,
        color: colors[0]
    }, {
        name: "render",
        id: "123",
        parent: "122",
        value: 17056,
        color: colors[0]
    }, {
        name: "(anonymous)",
        id: "122",
        parent: "76",
        value: 17056,
        color: colors[0]
    }, {
        name: "forEach",
        id: "76",
        parent: "47",
        value: 66992,
        color: colors[2]
    }, {
        name: "renderItem",
        id: "61",
        parent: "60",
        value: 16560,
        color: colors[0]
    }, {
        name: "forEach",
        id: "60",
        parent: "55",
        value: 16560,
        color: colors[2]
    }, {
        name: "E.stroke-widthSetter.E.strokeSetter",
        id: "70",
        parent: "69",
        value: 16400,
        color: colors[0]
    }, {
        name: "(anonymous)",
        id: "69",
        parent: "68",
        value: 16400,
        color: colors[0]
    }, {
        name: "a.objectEach",
        id: "68",
        parent: "67",
        value: 16400,
        color: colors[0]
    }, {
        name: "attr",
        id: "67",
        parent: "55",
        value: 16400,
        color: colors[0]
    }, {
        name: "positionItems",
        id: "71",
        parent: "55",
        value: 16464,
        color: colors[0]
    }, {
        name: "render",
        id: "55",
        parent: "54",
        value: 49424,
        color: colors[0]
    }, {
        name: "init",
        id: "54",
        parent: "53",
        value: 49424,
        color: colors[0]
    }, {
        name: "a.Legend",
        id: "53",
        parent: "47",
        value: 49424,
        color: colors[0]
    }, {
        name: "setTitle",
        id: "48",
        parent: "47",
        value: 16432,
        color: colors[0]
    }, {
        name: "buildText",
        id: "98",
        parent: "97",
        value: 16400,
        color: colors[0]
    }, {
        name: "add",
        id: "97",
        parent: "94",
        value: 16400,
        color: colors[0]
    }, {
        name: "a.numberFormat",
        id: "96",
        parent: "95",
        value: 16400,
        color: colors[0]
    }, {
        name: "defaultLabelFormatter",
        id: "95",
        parent: "94",
        value: 16400,
        color: colors[0]
    }, {
        name: "addLabel",
        id: "94",
        parent: "93",
        value: 32800,
        color: colors[0]
    }, {
        name: "a.Tick",
        id: "93",
        parent: "92",
        value: 32800,
        color: colors[0]
    }, {
        name: "generateTick",
        id: "92",
        parent: "91",
        value: 32800,
        color: colors[0]
    }, {
        name: "(anonymous)",
        id: "91",
        parent: "90",
        value: 32800,
        color: colors[0]
    }, {
        name: "forEach",
        id: "90",
        parent: "89",
        value: 32800,
        color: colors[2]
    }, {
        name: "a.fireEvent",
        id: "108",
        parent: "107",
        value: 16408,
        color: colors[0]
    }, {
        name: "autoLabelAlign",
        id: "107",
        parent: "105",
        value: 16408,
        color: colors[0]
    }, {
        name: "renderUnsquish",
        id: "105",
        parent: "89",
        value: 32808,
        color: colors[0]
    }, {
        name: "getOffset",
        id: "89",
        parent: "88",
        value: 65608,
        color: colors[0]
    }, {
        name: "(anonymous)",
        id: "88",
        parent: "87",
        value: 65608,
        color: colors[0]
    }, {
        name: "forEach",
        id: "87",
        parent: "86",
        value: 65608,
        color: colors[2]
    }, {
        name: "getAxisMargins",
        id: "86",
        parent: "47",
        value: 65608,
        color: colors[0]
    }, {
        name: "plotGroup",
        id: "140",
        parent: "136",
        value: 16464,
        color: colors[0]
    }, {
        name: "render",
        id: "136",
        parent: "135",
        value: 49948,
        color: colors[0]
    }, {
        name: "(anonymous)",
        id: "135",
        parent: "134",
        value: 66860,
        color: colors[0]
    }, {
        name: "forEach",
        id: "134",
        parent: "133",
        value: 66860,
        color: colors[2]
    }, {
        name: "renderSeries",
        id: "133",
        parent: "47",
        value: 66860,
        color: colors[0]
    }, {
        name: "render",
        id: "47",
        parent: "20",
        value: 298564,
        color: colors[0]
    }, {
        name: "firstRender",
        id: "20",
        parent: "8",
        value: 380924,
        color: colors[0]
    }, {
        name: "(anonymous)",
        id: "8",
        parent: "7",
        value: 397316,
        color: colors[0]
    }, {
        name: "a.fireEvent",
        id: "7",
        parent: "6",
        value: 397316,
        color: colors[0]
    }, {
        name: "init",
        id: "6",
        parent: "5",
        value: 397316,
        color: colors[0]
    }, {
        name: "getArgs",
        id: "5",
        parent: "4",
        value: 397316,
        color: colors[0]
    }, {
        name: "a.Chart",
        id: "4",
        parent: "3",
        value: 397316,
        color: colors[0]
    }, {
        name: "a.chart",
        id: "3",
        parent: "2",
        value: 397316,
        color: colors[0]
    }, {
        name: "(anonymous)",
        id: "2",
        parent: "1",
        value: 397316,
        color: colors[0]
    }, {
        name: "(root)",
        id: "1",
        parent: "",
        value: 397316,
        color: colors[2]
    }],
    data = [{
        name: "buildText",
        id: "98",
        value: 16400,
        color: colors[0],
        x: -22,
        low: 264848,
        high: 281248
    }, {
        name: "a.numberFormat",
        id: "96",
        value: 16400,
        color: colors[0],
        x: -22,
        low: 281248,
        high: 297648
    }, {
        name: "add",
        id: "97",
        value: 16400,
        color: colors[0],
        x: -21,
        low: 264848,
        high: 281248
    }, {
        name: "defaultLabelFormatter",
        id: "95",
        value: 16400,
        color: colors[0],
        x: -21,
        low: 281248,
        high: 297648
    }, {
        name: "~",
        id: "39",
        value: 16716,
        color: colors[0],
        x: -20,
        low: 32792,
        high: 49508
    }, {
        name: "addLabel",
        id: "94",
        value: 32800,
        color: colors[0],
        x: -20,
        low: 264848,
        high: 297648
    }, {
        name: "a.objectEach",
        id: "38",
        value: 16716,
        color: colors[0],
        x: -19,
        low: 32792,
        high: 49508
    }, {
        name: "a.Tick",
        id: "93",
        value: 32800,
        color: colors[0],
        x: -19,
        low: 264848,
        high: 297648
    }, {
        name: "u",
        id: "37",
        value: 16716,
        color: colors[0],
        x: -18,
        low: 32792,
        high: 49508
    }, {
        name: "E.buildStacks",
        id: "83",
        value: 16872,
        color: colors[0],
        x: -18,
        low: 148432,
        high: 165304
    }, {
        name: "E.stroke-widthSetter.E.strokeSetter",
        id: "70",
        value: 16400,
        color: colors[0],
        x: -18,
        low: 215552,
        high: 231952
    }, {
        name: "generateTick",
        id: "92",
        value: 32800,
        color: colors[0],
        x: -18,
        low: 264848,
        high: 297648
    }, {
        name: "a.fireEvent",
        id: "108",
        value: 16408,
        color: colors[0],
        x: -18,
        low: 314048,
        high: 330456
    }, {
        name: "a.merge",
        id: "36",
        value: 16716,
        color: colors[0],
        x: -17,
        low: 32792,
        high: 49508
    }, {
        name: "~",
        id: "82",
        value: 16872,
        color: colors[0],
        x: -17,
        low: 148432,
        high: 165304
    }, {
        name: "~",
        id: "69",
        value: 16400,
        color: colors[0],
        x: -17,
        low: 215552,
        high: 231952
    }, {
        name: "~",
        id: "91",
        value: 32800,
        color: colors[0],
        x: -17,
        low: 264848,
        high: 297648
    }, {
        name: "autoLabelAlign",
        id: "107",
        value: 16408,
        color: colors[0],
        x: -17,
        low: 314048,
        high: 330456
    }, {
        name: "setOptions",
        id: "35",
        value: 16716,
        color: colors[0],
        x: -16,
        low: 32792,
        high: 49508
    }, {
        name: "a.fireEvent",
        id: "80",
        value: 33304,
        color: colors[0],
        x: -16,
        low: 132000,
        high: 165304
    }, {
        name: "renderItem",
        id: "61",
        value: 16560,
        color: colors[0],
        x: -16,
        low: 198992,
        high: 215552
    }, {
        name: "a.objectEach",
        id: "68",
        value: 16400,
        color: colors[0],
        x: -16,
        low: 215552,
        high: 231952
    }, {
        name: "forEach",
        id: "90",
        value: 32800,
        color: colors[2],
        x: -16,
        low: 264848,
        high: 297648
    }, {
        name: "renderUnsquish",
        id: "105",
        value: 32808,
        color: colors[0],
        x: -16,
        low: 297648,
        high: 330456
    }, {
        name: "plotGroup",
        id: "140",
        value: 16464,
        color: colors[0],
        x: -16,
        low: 380852,
        high: 397316
    }, {
        name: "init",
        id: "34",
        value: 16716,
        color: colors[0],
        x: -15,
        low: 32792,
        high: 49508
    }, {
        name: "a.objectEach",
        id: "25",
        value: 16416,
        color: colors[0],
        x: -15,
        low: 65924,
        high: 82340
    }, {
        name: "getSeriesExtremes",
        id: "79",
        value: 33304,
        color: colors[0],
        x: -15,
        low: 132000,
        high: 165304
    }, {
        name: "setTickInterval",
        id: "81",
        value: 16632,
        color: colors[0],
        x: -15,
        low: 165304,
        high: 181936
    }, {
        name: "forEach",
        id: "60",
        value: 16560,
        color: colors[2],
        x: -15,
        low: 198992,
        high: 215552
    }, {
        name: "attr",
        id: "67",
        value: 16400,
        color: colors[0],
        x: -15,
        low: 215552,
        high: 231952
    }, {
        name: "positionItems",
        id: "71",
        value: 16464,
        color: colors[0],
        x: -15,
        low: 231952,
        high: 248416
    }, {
        name: "getOffset",
        id: "89",
        value: 65608,
        color: colors[0],
        x: -15,
        low: 264848,
        high: 330456
    }, {
        name: "render",
        id: "136",
        value: 49948,
        color: colors[0],
        x: -15,
        low: 347368,
        high: 397316
    }, {
        name: "I",
        id: "33",
        value: 16716,
        color: colors[0],
        x: -14,
        low: 32792,
        high: 49508
    }, {
        name: "attr",
        id: "24",
        value: 16416,
        color: colors[0],
        x: -14,
        low: 65924,
        high: 82340
    }, {
        name: "forEach",
        id: "29",
        value: 16412,
        color: colors[2],
        x: -14,
        low: 82340,
        high: 98752
    }, {
        name: "setScale",
        id: "78",
        value: 49936,
        color: colors[0],
        x: -14,
        low: 132000,
        high: 181936
    }, {
        name: "render",
        id: "123",
        value: 17056,
        color: colors[0],
        x: -14,
        low: 181936,
        high: 198992
    }, {
        name: "render",
        id: "55",
        value: 49424,
        color: colors[0],
        x: -14,
        low: 198992,
        high: 248416
    }, {
        name: "~",
        id: "88",
        value: 65608,
        color: colors[0],
        x: -14,
        low: 264848,
        high: 330456
    }, {
        name: "~",
        id: "135",
        value: 66860,
        color: colors[0],
        x: -14,
        low: 330456,
        high: 397316
    }, {
        name: "~",
        id: "32",
        value: 16716,
        color: colors[0],
        x: -13,
        low: 32792,
        high: 49508
    }, {
        name: "init",
        id: "23",
        value: 16416,
        color: colors[0],
        x: -13,
        low: 65924,
        high: 82340
    }, {
        name: "~",
        id: "28",
        value: 16412,
        color: colors[0],
        x: -13,
        low: 82340,
        high: 98752
    }, {
        name: "~",
        id: "77",
        value: 49936,
        color: colors[0],
        x: -13,
        low: 132000,
        high: 181936
    }, {
        name: "~",
        id: "122",
        value: 17056,
        color: colors[0],
        x: -13,
        low: 181936,
        high: 198992
    }, {
        name: "init",
        id: "54",
        value: 49424,
        color: colors[0],
        x: -13,
        low: 198992,
        high: 248416
    }, {
        name: "forEach",
        id: "87",
        value: 65608,
        color: colors[2],
        x: -13,
        low: 264848,
        high: 330456
    }, {
        name: "forEach",
        id: "134",
        value: 66860,
        color: colors[2],
        x: -13,
        low: 330456,
        high: 397316
    }, {
        name: "forEach",
        id: "31",
        value: 33116,
        color: colors[2],
        x: -12,
        low: 16392,
        high: 49508
    }, {
        name: "a.SVGRenderer",
        id: "22",
        value: 16416,
        color: colors[0],
        x: -12,
        low: 65924,
        high: 82340
    }, {
        name: "forEach",
        id: "27",
        value: 16412,
        color: colors[2],
        x: -12,
        low: 82340,
        high: 98752
    }, {
        name: "forEach",
        id: "76",
        value: 66992,
        color: colors[2],
        x: -12,
        low: 132000,
        high: 198992
    }, {
        name: "a.Legend",
        id: "53",
        value: 49424,
        color: colors[0],
        x: -12,
        low: 198992,
        high: 248416
    }, {
        name: "setTitle",
        id: "48",
        value: 16432,
        color: colors[0],
        x: -12,
        low: 248416,
        high: 264848
    }, {
        name: "getAxisMargins",
        id: "86",
        value: 65608,
        color: colors[0],
        x: -12,
        low: 264848,
        high: 330456
    }, {
        name: "renderSeries",
        id: "133",
        value: 66860,
        color: colors[0],
        x: -12,
        low: 330456,
        high: 397316
    }, {
        name: "getAxes",
        id: "30",
        value: 33116,
        color: colors[0],
        x: -11,
        low: 16392,
        high: 49508
    }, {
        name: "getContainer",
        id: "21",
        value: 32832,
        color: colors[0],
        x: -11,
        low: 49508,
        high: 82340
    }, {
        name: "resetMargins",
        id: "26",
        value: 16412,
        color: colors[0],
        x: -11,
        low: 82340,
        high: 98752
    }, {
        name: "render",
        id: "47",
        value: 298564,
        color: colors[0],
        x: -11,
        low: 98752,
        high: 397316
    }, {
        name: "firstRender",
        id: "20",
        value: 380924,
        color: colors[0],
        x: -10,
        low: 16392,
        high: 397316
    }, {
        name: "~",
        id: "8",
        value: 397316,
        color: colors[0],
        x: -9,
        low: 0,
        high: 397316
    }, {
        name: "a.fireEvent",
        id: "7",
        value: 397316,
        color: colors[0],
        x: -8,
        low: 0,
        high: 397316
    }, {
        name: "init",
        id: "6",
        value: 397316,
        color: colors[0],
        x: -7,
        low: 0,
        high: 397316
    }, {
        name: "getArgs",
        id: "5",
        value: 397316,
        color: colors[0],
        x: -6,
        low: 0,
        high: 397316
    }, {
        name: "a.Chart",
        id: "4",
        value: 397316,
        color: colors[0],
        x: -5,
        low: 0,
        high: 397316
    }, {
        name: "a.chart",
        id: "3",
        value: 397316,
        color: colors[0],
        x: -4,
        low: 0,
        high: 397316
    }, {
        name: "~",
        id: "2",
        value: 397316,
        color: colors[0],
        x: -3,
        low: 0,
        high: 397316
    }, {
        name: "(root)",
        id: "1",
        value: 397316,
        color: colors[2],
        x: -2,
        low: 0,
        high: 397316
    }];

// Add new series type for the flame series

(function (H) {
    H.seriesType('flame', 'columnrange', {
        cursor: 'pointer',
        dataLabels: {
            enabled: true,
            format: '{point.name}',
            inside: true,
            align: 'center',
            crop: true,
            overflow: 'none',
            color: 'black',
            style: {
                textOutline: 'none',
                fontWeight: 'normal'
            }
        },
        point: {
            events: {
                click: function () {
                    var point = this,
                        chart = point.series.chart,
                        series = point.series,
                        xAxis = series.xAxis,
                        yAxis = series.yAxis;

                    xAxis.setExtremes(xAxis.min, point.x, false);
                    yAxis.setExtremes(point.low, point.high, false);

                    chart.showResetZoom();
                    chart.redraw();
                }
            }
        },
        pointPadding: 0,
        groupPadding: 0
    }, {
        drawDataLabels: H.seriesTypes.line.prototype.drawDataLabels
    });
}(Highcharts));

// Create the chart

var chart = Highcharts.chart('container', {
    chart: {
        inverted: true
    },
    title: {
        align: 'left',
        text: 'Flame chart (layout: flame)'
    },
    subtitle: {
        align: 'left',
        text: 'Highcharts chart rendering process'
    },
    legend: {
        enabled: false
    },
    xAxis: [{
        visible: false
    }, {
        visible: false,
        startOnTick: false,
        endOnTick: false,
        minPadding: 0,
        maxPadding: 0
    }],
    yAxis: [{
        visible: false
    }, {
        visible: false,
        min: 0,
        maxPadding: 0,
        startOnTick: false,
        endOnTick: false
    }],
    series: [{
        type: 'flame',
        data: data,
        yAxis: 1,
        xAxis: 1
    }, {
        visible: false,
        size: '100%',
        type: 'sunburst',
        data: sunburstData,
        allowDrillToNode: true,
        cursor: 'pointer',
        levels: [{
            level: 1,
            levelIsConstant: false,
            dataLabels: {
                enabled: false
            }
        }],
        dataLabels: {
            textPath: {
                attributes: {
                    dy: 5
                },
                enabled: true
            }
        }
    }],
    tooltip: {
        headerFormat: "",
        pointFormat: 'selfSize of <b>{point.name}</b> is <b>{point.value}</b>'
    }
});

// Set up buttons for the chart layout change

var icicleButton = document.getElementById('icicle'),
    flameButton = document.getElementById('flame'),
    sunburstButton = document.getElementById('sunburst'),
    activeButtonIndex = 1,
    allButtons = [icicleButton, flameButton, sunburstButton];

icicleButton.onclick = function () {
    chart.update({
        chart: {
            inverted: true
        },
        xAxis: [{}, {
            reversed: false
        }],
        title: {
            text: 'Flame chart (layout: icicle)'
        },
        series: [{
            visible: true
        }, {
            visible: false
        }]
    }, true, false, activeButtonIndex !== 2);

    allButtons[activeButtonIndex].disabled = false;
    icicleButton.disabled = true;
    activeButtonIndex = 0;
};

flameButton.onclick = function () {
    chart.update({
        chart: {
            inverted: true
        },
        xAxis: [{}, {
            reversed: true
        }],
        title: {
            text: 'Flame chart (layout: flame)'
        },
        series: [{
            visible: true
        }, {
            visible: false
        }]
    }, true, false, activeButtonIndex !== 2);

    allButtons[activeButtonIndex].disabled = false;
    flameButton.disabled = true;
    activeButtonIndex = 1;
};

sunburstButton.onclick = function () {
    chart.update({
        chart: {
            inverted: false
        },
        xAxis: [{}, {
            reversed: true
        }],
        title: {
            text: 'Flame chart (layout: sunburst)'
        },
        series: [{
            visible: false
        }, {
            visible: true
        }]
    }, true, false, false);

    allButtons[activeButtonIndex].disabled = false;
    sunburstButton.disabled = true;
    activeButtonIndex = 2;
};