score:2

Accepted answer

You can set your points as follows:

    genderChart.series[0].addPoint({

        name: key_g,
        y: val_g

    });

score:0

I know this question has been solved. but the map function for array might be a good choice in these cases, I love map in functional language!

data = [{"y":"Mr","x":"145"},{"y":"Miss","x":"43"},
        {"y":"Mrs","x":"18"},{"y":"Ms","x":"2"}];

var series = data.map(function(e){ return parseInt(e.x); });

.... hight chart ....

score:1

By rearranging my Json to have "name" and "y" as the keys i was able to make progress i.e:

[{"name":"Mr","y":"145"},{"name":"Miss","y":"43"},{"name":"Mrs","y":"18"},{"name":"Ms","y":"2"}]

Then by looping through the json data and parsing the "y" value as a int with the function parseInt() in the JS i was able to get my desired result...

function genderData() {
$.getJSON('/statsboard/gender', function(data_g) {
$.each(data_g, function(key_g, val_g) {
    obj_g = val_g;
     genderChart.series[0].addPoint({
        name: obj_g.name,
        y: parseInt(obj_g.y)
});
console.log(obj_g.y)
});
});
}

score:3

The forms:

[{"name": "Mr", "y": 145}, ...]

or

[["Mr", 145], ...]

will work. Notice the second form is an array of arrays not an array of objects (you were close).

See basic-pie demo (click view options and scroll down to data), series.data docs, and series.addPoint docs for more info.

If you make the server side return the data in one of the two above forms you can just do:

function genderData() {
  $.getJSON('/statsboard/gender', function(data_g) {
    genderChart.series[0].setData(data_g, true);
  });
}

Related Query

More Query from same tag