Highcharts breaks up my data array in a strange way

Question

I'm using Highcharts (link to a specific demo -- click View Options to compare below code) to render some data for personal-use.

[Note: this is almost definitely a me-related error, so I don't mean to insinuate that Highcharts is at fault -- it's really a wonderful api!]

When setting the series.data field of the chart object, I encounter strange array sectioning.

For instance, this works fine:

series: [{
    name: 'seriesName',
    data: [22, 24, 15]
}]

And three data points are plotted with values 22, 24 and 15.

However,

series: [{
    name: 'sillySeries',
    data: chartData[0]
}]

renders 3 points with the values 2, 4 and 5 and the titles of the points are 2, 2 and 1 respectively... that is, it's splitting the array entries into a title and then a value for two-digit numbers.

console.log shows me that chartData looks like

22,24,15,2010-9,2010-10,2010-11 

(3 values for 3 months)

Although the actual arrays are more like [22,24,15][2010-9,2010-10,2010-11]

My 2d-array chartData[][] has [column][row] indices for the data, and I figured that asking for chartData[0] would return an array.

Perhaps my question should be: How do I return a 1d array from a 2d array representation for setting properties/values in javascript objects? It seems like I'm probably overlooking something very obvious.

---

edit:

data: [24]

plots one point at 24, awesome.

data: '24'

splits up the data as title and then value, effectively plotting a point at 4 and not 24.

So the representation becomes a string when I try to pass an array to the data field. Any way I can do like string.toArray ?

---

edit 2:

chartData[col][row] is declared as an empty array

var chartData = [];

and subsequently filled up with values by iterating over an HTML table's rows and columns, where the innermost loop contents look like

chartData[cellIndex][rowIndex] = $(currentCell).text();

Answer 1

parseInt() saved the day.

something like

for (i=0; i<chartData[0].length; ++i) {
    columnOne.push(parseInt(chartData[0][i]);
}

gave me an array that I could then use to display the data with the data field in the object notation

data: columnOne

or more literally

chart1.series[0].data = columnOne;

Thank you James for pointing out

While chartData is probably an array, it sounds like chartData[0] is a string.

which lead to my discovery that the data in my array was actually all strings, which I kept this way because some fields are strings, some are dates (YYYY-MM-DD) and some are just ints.

Many thanks to you both =)

Answer 2

While chartData is probably an array, it sounds like chartData[0] is a string. When you use an array index on a string you get the character at that position, which is exactly what you are experiencing...

renders 3 points with the values 2, 4 and 5 and the titles of the points are 2, 2 and 1 respectively... that is, it's splitting the array entries into a title and then a value for two-digit numbers.

There are many ways to define arrays within arrays in javascript; here is one:

var chartData = [
  [22,24,15]
  ,['2010-9','2010-10','2010-11']
];

Answer 3

Well, this is not a real answer, but might help you.

Highcharts enables you to preprocess certain options. In your case, you could do something like :

options.series[0].data = new Array(1, 0, 4);

doc reference : http://www.highcharts.com/documentation/how-to-use#options

If this fails, comment above.