Highcharts not display chart - highcharts

Question

I am having an issue displaying my chart. I am creating a script that displays three charts with a print button to print all the chart to one PDF.
The JSON call is returning:
[{"name":"Month"},{"name":"percent","data":[9.52]}]
I am not getting any errors in the browser console, can any one see where I am going wrong.
$(function () { //1
var chart1, chart2, chart3;
var categories=[];
//var chart;
var data2 =[];
$(document).ready(function() { //2
$.getJSON("../charts/1-2-4-detractors_month_chart.php?From=<?php echo $_GET['From'];?>&To=<?php echo $_GET['To'];?>", function(json) { //3
$.each(json,function(i,el) { //4
if (el.name=="Month")
categories = el.data;
else data2.push(el);
});
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'column',
marginTop: 25,
marginRight: 25,
marginBottom: 25,
plotBackgroundColor: '#FCFFC5',
style: {
fontFamily: 'serif',
fontSize: '8px',
}
},
title: {
text: '',
},
subtitle: {
text: '',
},
xAxis: {
categories: categories,
labels: {
enabled: false
}
},
yAxis: {
endOnTick: false,
max:101,
showFirstLabel: false,
lineColor:'#999',
lineWidth:1,
tickColor:'#666',
tickWidth:1,
tickLength:2,
tickInterval: 10,
gridLineColor:'#ddd',
title: {
text: '',
style: {
fontFamily: 'Tahoma',
color: '#000000',
fontWeight: 'bold',
fontSize: '8px'
}
},
plotLines: [{
color: '#808080'
}]
},
legend: {
enabled: false,
},
colors: ['#FF0000','#FF2F2F'],
plotOptions: {
column: {
colorByPoint: true
},
series: {
cursor: 'pointer',
pointWidth: 20,
point: {
events: {
//click: function() {
//location.href = "feedback-items_detractors_iframe.php?FromDate1=<?php echo $StartDate;?>&ToDate1=<?php echo $EndDate;?> target='iframe2'";
//}
}
},
legendIndex:0,
dataLabels: {
enabled: true,
color: '#000000',
align: 'center',
cursor: 'pointer',
borderRadius: 5,
backgroundColor: 'rgba(252, 255, 255, 255)',
borderWidth: 1,
borderColor: '#AAA',
y: -6,
format: '{y:.2f} %', // one decimal
y: -20, // 10 pixels down from the top
style: {
textShadow: false,
fontSize: '8px',
fontFamily: 'Verdana, sans-serif'
}
}
}
},
tooltip: {
style: {
fontSize: '7pt',
fontFamily: 'Verdana, sans-serif'
},
valueDecimals: 1,
formatter: function() {
return '<b>Guest responses:<br/> '+ this.y +'%</b>';
}
},
navigation: {
buttonOptions: {
verticalAlign: 'top',
y: -10,
x: -20
}
},
credits: {
enabled: false
},
series: data2,
lang: {
noData: "No data"
},
noData: {
style: {
fontWeight: 'normal',
fontSize: '12px',
color: '#303030'
}
},
});
});
});
//});
//--------------------------------------------------------------------
$("#print").click(function () {
printCharts([chart1, chart2, chart3]);
});
//--------------------------------------------------------------------
function printCharts(charts) {
var origDisplay = [],
origParent = [],
body = document.body,
childNodes = body.childNodes;
// hide all body content
Highcharts.each(childNodes, function (node, i) {
if (node.nodeType === 1) {
origDisplay[i] = node.style.display;
node.style.display = "none";
}
});
// put the charts back in
$.each(charts, function (i, chart) {
origParent[i] = chart.container.parentNode;
body.appendChild(chart.container);
});
// print
window.print();
// allow the browser to prepare before reverting
setTimeout(function () {
// put the chart back in
$.each(charts, function (i, chart) {
origParent[i].appendChild(chart.container);
});
// restore all body content
Highcharts.each(childNodes, function (node, i) {
if (node.nodeType === 1) {
node.style.display = origDisplay[i];
}
});
}, 500);
}
});