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;
};