Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Highcharts series data array

From an ajax call I get the following data back:

18,635,21,177,20,165,22,163,24,162,25,145,19,143,23,139,26,112,27,110,28,104,30,91,29,88,31,68,32,57,36,55,34,53,33,51,35,46,37,44,39,42,43,39,42,39,41,38,38,37,44,36,45,34,48,31,40,31,47,27,49,23,46,21,50,21,52,17,55,17,53,16,51,15,54,12,58,6,57,6,59,4,63,4,56,3,62,2,64,2,100,2,68,1,78,1,60,1,97,1,70,1,65,1,69,1,71,1

Of which every even number should be the key and every odd the value. But I have no idea how to parse it as highcharts data. Somehow I end up with the key being "slice" if I use JSON.parse and the only way I can get it to work normally is by placing it directly into the series data like this (after seperating the odd and even into seperate arrays):

[names[0] + ' years old', parseFloat(values[0])]

Which is great. But then I need to loop through the arrays somehow, pushing everything into the series data and I don't know how to do that. If I make a for loop with this data, how do I insert into the highcharts series data?

like image 895
Galadre Avatar asked Apr 17 '13 13:04

Galadre


People also ask

What is plotOptions in Highcharts?

The plotOptions is a wrapper object for config objects for each series type. The config objects for each series can also be overridden for each series item as given in the series array. Configuration options for the series are given in three levels. Options for all series in a chart are given in the plotOptions.

What is series chart?

A data series is a row or column of numbers that are entered in a worksheet and plotted in your chart, such as a list of quarterly business profits.

What is legend in Highcharts?

The legend is a box containing a symbol and name for each series item or point item in the chart. Each series (or points in case of pie charts) is represented by a symbol and its name in the legend. It is possible to override the symbol creator function and create custom legend symbols.

What language is used in Highcharts?

Highcharts is a software library for charting written in pure JavaScript, first released in 2009.


2 Answers

If you have that series data in an array, you can process it as follows:

var myData = [18, 635, 21, 177, 20, 165, 22, 163, 24, 162, 25, 145, 19, 143,
             23, 139, 26, 112, 27, 110, 28, 104, 30, 91, 29, 88, 31, 68, 32,
             57, 36, 55, 34, 53, 33, 51, 35, 46, 37, 44, 39, 42, 43, 39, 42, 
             39, 41, 38, 38, 37, 44, 36, 45, 34, 48, 31, 40, 31, 47, 27, 49,
             23, 46, 21, 50, 21, 52, 17, 55, 17, 53, 16, 51, 15, 54, 12, 58, 6,
             57, 6, 59, 4, 63, 4, 56, 3, 62, 2, 64, 2, 100, 2, 68, 1, 78, 1, 60,
             1, 97, 1, 70, 1, 65, 1, 69, 1, 71, 1];
var mySeries = [];
    for (var i = 0; i < myData.length; i++) {
        mySeries.push([myData[i], myData[i + 1]]);
        i++
    }

Once you have your series data in 'mySeries', you can just set your chart data using:

series:[{
    data: mySeries
}]

Alternatively, if you want to add the data after rendering the chart, you can add the series data dynamically using:

chart.series[0].setData(mySeries);

http://jsfiddle.net/Cm3Ps/ (press the 'Add My Data' button).

like image 107
SteveP Avatar answered Sep 19 '22 11:09

SteveP


Actually, the function requires parameter as array of int.

Assume you get a function

drawChartFunction(data) {
    // some code here
    series: [{ data: data}]
} 

You can try it:

array = {9,8,7,6}
var series = [];
for (var i = 0; i < array.length; i++) {
    series.push([i, array.[i]]); 
}

After the for executed, your series likes

0,9
1,8
2,7
3,6

Then, you call drawChartFunction(series)

So your chart is drawn by using 4 points 0 1 2 3 with their values 9 8 7 6

like image 41
Minh Nguyễn Avatar answered Sep 22 '22 11:09

Minh Nguyễn