I am trying to create a treechart using highchart.js. I am doing something similar to this https://jsfiddle.net/mushigh/8wmugzx2/?utm_source=website&utm_medium=embed&utm_campaign=8wmugzx2
My Code:
$(function() {
// Create the chart
$('#container').highcharts({
xAxis: {
// Avoid data module setting axis type to category.
type: 'linear'
},
series: [{
type: "treemap",
layoutAlgorithm: 'strip',
alternateStartingDirection: true,
levels: [{
level: 1,
layoutAlgorithm: 'strip',
dataLabels: {
enabled: true,
align: 'left',
verticalAlign: 'top',
style: {
fontSize: '13px',
fontWeight: 'bold'
}
}
}]
}],
title: {
text: 'Chart title'
},
data: {
googleSpreadsheetKey: '1CSSXuFN5lJJedAS7RO-8HkL2VNi_ljtsly5Cnq04V6M',
seriesMapping: [{
id: 1,
name: 1,
value: 2,
parent: 3,
color: 4
}]
}
});
});
When I use the data provided in the jsfiddle, it works without any error. But if I replace the source data with mine, it throws a Range Error. The code is almost the same as the example. I am just changing the Googlesheets token with my googlesheets data.
Link to data source in the example: https://docs.google.com/spreadsheets/d/1wYm5waQmiYKGhtdofvXDS8SHdh72Mwcnygvf3bvFfoU/edit#gid=0
Link to my data source: https://docs.google.com/spreadsheets/d/1CSSXuFN5lJJedAS7RO-8HkL2VNi_ljtsly5Cnq04V6M/edit#gid=0
I am unable to debug this issue. Any help is appreciated.
Thank you :)
Error Log:
[Error] RangeError: Maximum call stack size exceeded.
toLength (highcharts.js:29:85)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
(anonymous function) (treemap.js:15:220)
forEach
each (highcharts.js:29:85)
buildNode (treemap.js:15:185)
Your spreadsheet seem to have a Multiple Bias Incidents in the last row for both child and parent columns.
This is where I think the problem is, because the tree build could possibly be recursive and when a child refers to itself, it might try to render over and over again. Can you please try that and let me know.
You can check these sample fiddles that prove the point
MAX STACK ERROR (Here one of the entry Anne has parent and id as same value)
NO ERROR (Here there is no such repetition)