Converted PHP code that built an array to JS and now highcharts doesn't work - what did I do wrong?

Question

So I used to have a block of PHP code inside my JS that built up this string:

<snip>
    series: [{
        marker: {
            fillColor:'#66aaff'
        },
        color: '#66aaff',
        name: 'Person 1',
        data: [{x:0, y: 12},{x:1, y: 16},{x:2, y: 18},{x:3, y: 14}]
    }, {
        marker: {
            fillColor:'#ff8888'
        },
        color: '#ff8888',
        name: 'Person 2',
        data: [{x:0, y: 26},{x:1, y: 17},{x:2, y: 22},{x:3, y: 17}]
    }]
<snip>

I want to move my JS to an external file, so I'm now passing a few variables through to JS, and building the array with this:

var aSeries = [];
for (i = 0; i < aIDs.length; i++) {
    aSeries.push({
        marker: {
            fillColor: '#' + aSeriesColors[i]
        },
        color: '#' + aSeriesColors[i],
        name: aNames[aIDs[i]],
        data: [data[aIDs[i]].join(',')]
    });
}

console.log(aSeries) shows me that this "correctly" gives me a JS object with all of the properties I'm looking for.

I've then changed the first code block above simply to:

<snip>
    series: aSeries
<snip>

I get no JS errors, but my graph doesn't show correctly. The legend of series names shows correctly, but only one item is placed on the x-axis (instead of 4) and no data points are plotted.

console.log(data):

Object {154: Array[4], 156: Array[4], 307: Array[4], 994: Array[4]}
154: Array[4]
0: "{x:0, y: 26.145225241042}"
1: "{x:1, y: 17.211534431451}"
2: "{x:2, y: 22.184885666481}"
3: "{x:3, y: 17.898072988406}"
length: 4
__proto__: Array[0]
156: Array[4]
0: "{x:0, y: 12.555414124567}"
1: "{x:1, y: 16.300627296478}"
2: "{x:2, y: 18.353667038483}"
3: "{x:3, y: 14.082830741251}"
length: 4
__proto__: Array[0]
307: Array[4]
0: "{x:0, y: 37.967636688174}"
1: "{x:1, y: 30.79271274292}"
2: "{x:2, y: 34.540574456219}"
3: "{x:3, y: 37.892991347838}"
length: 4
__proto__: Array[0]
994: Array[4]
0: "{x:0, y: 4.1734334079504}"
1: "{x:1, y: 0.35625969235927}"
2: "{x:2, y: 6.3747908533185}"
3: "{x:3, y: 0.62718142794101}"
length: 4
__proto__: Array[0]
__proto__: Object

the data in JS now that I generate it as a proper PHP array first (snipped to first indice for brevity:

Object {154: Array[4], 156: Array[4], 307: Array[4], 994: Array[4]}
154: Array[4]
0: Object
x: "0"
y: "26.145225241042"
__proto__: Object
1: Object
x: "1"
y: "17.211534431451"
__proto__: Object
2: Object
x: "2"
y: "22.184885666481"
__proto__: Object
3: Object
x: "3"
y: "17.898072988406"
__proto__: Object
length: 4
__proto__: Array[0]

Answer 1

Your problem is in here:

data: [data[aIDs[i]].join(',')]

.join returns a string, which isn't what you need. You probably need:

data: data[aIDs[i]]

Since data[aIDs[i]] already appears to be an array.

However, since it's an array of string, there's one last step:

data: data[aIDs[i]].map(JSON.parse)

This should parse each individual string in data[aIDs[i]] , and result in an array of {x: number, y: number} elements.