Highcharts graph shows 265 series and no data after update to categories and series - highcharts

Question

I inherited a small project that worked clunky and was actually quite wrong in its implementations and it almost has me tearing my head out.
http://stockfractions.com/doittest.php?TimeType=2&StartTimeFrameID=10&EndTimeFrameID=20&CompanyID=91,89&MetricID=2,3
What I am trying to do is to control what is shown on the graph so that i can export the final graph and dataset. The script basically does a pivot query in MySQL and then divides the data up by timeframe increments on the resultant page. Clicking the individual checkboxes changes whether than timeframe is part of the graph. However, every time I change the graph contents, it just shows a bunch of legends at the bottom for series going from 1 to 265 and no data. I have the code spitting out both the categories for the x-axis and the series data being passed to make sure that I am not losing my mind.
function setDynamicChart(chartCategories, chartData){
alert(chartCategories + '\n' + chartData);
$('#container123').highcharts({
chart: {
type: 'line'
},
title: {
text: 'Fundamental Company Analysis'
},
plotOptions: {
line: {
dataLabels: {
enabled: false
},
enableMouseTracking: true
}
},
xAxis: {
categories: chartCategories
},
series: chartData
});
}
is the function to change the graphdata
function regen(){
var datacount = parseInt(document.f1.datacount.value);
var linecount = parseInt(document.f1.linecount.value);
var xnames = [];
mst = document.getElementById('metrics').value;
var metricnames = mst.split(",");
var sseries = "";
//rebuild
cats = "";
for(a = 1; a <= linecount; a++){
xnames[a] = document.getElementById('name_'+a).value;
for(b = 1; b <= metricnames.length; b++){
temp = ""
for(z = 1; z <= datacount; z++){
if(document.getElementById('set_'+z).checked){//deals with datacount
if(a==1 && b==1 )
cats = cats + "'" + document.getElementById('TimeFrame'+z).value + "',";
temp = temp + document.getElementById('data_' + a + '_' + z + '_' + b).value + ",";
}
}
sseries = sseries + "{ name: '" + xnames[a] + "-" + metricnames[b-1] + "', data: [" + removeLastComma(temp) + "]}, "
}
}
cats = '[' + removeLastComma(cats) + ']';
sseries = '[' + removeLastComma(sseries) + ']';
//setDynamicChart(eval("cats"),eval("sseries"));
setDynamicChart(cats,sseries);
}
is the code to regenerate the graph.
Here is an example of the code produced
<form name='f1' id='f1'>
<div id='mytablee_data'>
<input id='set_1' type='checkbox' value='1' onclick='regen();' checked='checked' style='top:-2px;position:relative;vertical-align: middle;margin-right: 9px'/>
<input type='hidden' value='2005FY' id='TimeFrame1'>
2005FY Data
<table id='mytablee_1' class='tablesorter' border='1'>
<thead><tr><th align='center'>Company</th><th align='center'>Accounts Payable</th><th align='center'>Accounts Receivable</th></tr>
</thead>
<tbody>
<tr align='right'><td style='width:auto' align='left'>Advanced Micro Devices</td><td style='width:auto'>856</td><td style='width:auto'>0</td></tr>
<tr align='right'><td style='width:auto' align='left'>Amazon</td><td style='width:auto'>1366</td><td style='width:auto'>0</td></tr></tbody></table><p></p>
<input id='set_2' type='checkbox' value='2' onclick='regen();' checked='checked' style='top:-2px;position:relative;vertical-align: middle;margin-right: 9px'/>
<input type='hidden' value='2006FY' id='TimeFrame2'>
2006FY Data
<table id='mytablee_2' class='tablesorter' border='1'>
<thead><tr><th align='center'>Company</th><th align='center'>Accounts Payable</th><th align='center'>Accounts Receivable</th></tr>
</thead>
<tbody>
<tr align='right'><td style='width:auto' align='left'>Advanced Micro Devices</td><td style='width:auto'>1338</td><td style='width:auto'>0</td></tr>
<tr align='right'><td style='width:auto' align='left'>Amazon</td><td style='width:auto'>1816</td><td style='width:auto'>-103</td></tr></tbody></table><p></p>
<input id='set_3' type='checkbox' value='3' onclick='regen();' checked='checked' style='top:-2px;position:relative;vertical-align: middle;margin-right: 9px'/>
<input type='hidden' value='2007FY' id='TimeFrame3'>
2007FY Data
<table id='mytablee_3' class='tablesorter' border='1'>
<thead><tr><th align='center'>Company</th><th align='center'>Accounts Payable</th><th align='center'>Accounts Receivable</th></tr>
</thead>
<tbody>
<tr align='right'><td style='width:auto' align='left'>Advanced Micro Devices</td><td style='width:auto'>1009</td><td style='width:auto'>0</td></tr>
<tr align='right'><td style='width:auto' align='left'>Amazon</td><td style='width:auto'>2795</td><td style='width:auto'>-255</td></tr></tbody></table><p></p>
<input type='hidden' name='linecount' value='2'>
<input type='hidden' name='datacount' value='3'>
<input type='hidden' id='metrics' value="Accounts Payable,Accounts Receivable">
<input type='hidden' value='Advanced Micro Devices' id='name_1'>
<input type='hidden' value='856' id='data_1_1_1'>
<input type='hidden' value='1338' id='data_1_2_1'>
<input type='hidden' value='1009' id='data_1_3_1'>
<input type='hidden' value='0' id='data_1_1_2'>
<input type='hidden' value='0' id='data_1_2_2'>
<input type='hidden' value='0' id='data_1_3_2'>
<input type='hidden' value='Amazon' id='name_2'>
<input type='hidden' value='1366' id='data_2_1_1'>
<input type='hidden' value='1816' id='data_2_2_1'>
<input type='hidden' value='2795' id='data_2_3_1'>
<input type='hidden' value='0' id='data_2_1_2'>
<input type='hidden' value='-103' id='data_2_2_2'>
<input type='hidden' value='-255' id='data_2_3_2'></div>
</form>
The data elements go by the company, timeframe, metric so as to easily parse for selection changes

Answer 1

Well.. first of all I would advice you to read some tutorials about JS. Otherwise you will lose all hairs. Mainly problem is with regen() function. In short, you are generating JSON string manually, for some unknown reason (too much PHP?).
I would upgrade your method:
function regen(){
var datacount = parseInt(document.f1.datacount.value);
var linecount = parseInt(document.f1.linecount.value);
var xnames = [];
mst = document.getElementById('metrics').value;
var metricnames = mst.split(",");
// series and categories in Highcharts should be arrays
var sseries = [],
cats = [];
for(a = 1; a <= linecount; a++){
xnames[a] = document.getElementById('name_'+a).value;
for(b = 1; b <= metricnames.length; b++){
// data in series should be an array too
temp = [];
for(z = 1; z <= datacount; z++){
if(document.getElementById('set_'+z).checked){//deals with datacount
if(a==1 && b==1 ) {
//push categories to the array
cats.push(document.getElementById('TimeFrame'+z).value);
}
// Highcharts requires values to be number, not a string -> parse that string to the value
temp.push(parseFloat(document.getElementById('data_' + a + '_' + z + '_' + b).value));
}
}
// generate series objects
sseries.push({ name: xnames[a] + "-" + metricnames[b-1], data: temp});
}
}
setDynamicChart(cats,sseries);
}
Extra advice: To debug JS, don't use alert(), but rather console.log() - it's easier to deal with developer tools, than some string in the alert popup.

Answer 2

Thanks so much. I saw something else online and took out the brackets for data. Here is the code in case anyone else is suffering the same way, and thanks Pawel for pointing me in the right direction.
function regen(){
var datacount = parseInt(document.f1.datacount.value);
var linecount = parseInt(document.f1.linecount.value);
var xnames = [];
mst = document.getElementById('metrics').value;
var metricnames = mst.split(",");
var sseries = [], cats = [];
for(a = 1; a <= linecount; a++){
xnames[a] = document.getElementById('name_'+a).value;
for(b = 1; b <= metricnames.length; b++){
temp = [];
for(z = 1; z <= datacount; z++){
if(document.getElementById('set_'+z).checked){//deals with datacount
if(a==1 && b==1 )
cats.push(document.getElementById('TimeFrame'+z).value);
temp.push(parseFloat(document.getElementById('data_' + a + '_' + z + '_' + b).value));
}
}
var itemx = {
name: "'" + xnames[a] + "-" + metricnames[b-1] + "'",
data: temp
};
sseries.push(itemx);
}
}
setDynamicChart(cats,sseries);
}