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
}];
(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));
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>'
}
});
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;
};