Parsing JSON data for Highcharts

Question

I have been going in circles for a few hours with this and have exhausted all the similar stackoverflow threads and also highcharts docs, so hopefully someone can help.

I am trying to plot a pie chart with a gender split. I have worked with line charts before and so had my data in the format for x and y axis, like this:

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

This was getting me somewhere, i could tap into the json and pull out the ints but i couldnt for the life of me get the titles associated with the figures...

function genderData() {
 $.getJSON('/statsboard/gender', function(data_g) {
    $.each(data_g, function(key_g, val_g) {
        obj_g = val_g;
         genderChart.series[0].addPoint(parseInt(obj_g.x));

        //genderChart.xAxis[0].categories.push(obj_g.y);
    });
 });
}

I then just called the function genderData as follows:

genderChart = new Highcharts.Chart({
        chart: {
            renderTo: 'gender',
            events: {
                load: genderData
            }
        }
        title: {
            text: 'Gender Split'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            },
        },
        series: [{
            type: 'pie',
            name: 'Gender Split',
            data: []
        }]
    });

So i ended up with an accurate chart but with out the labels, and they would just default to 'slice'...

So close but no cigar ;-)

Soooo i altered my serverside code to return the following format as per the docs :-), now returning the following:

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

This looks pretty much spot on to me, but alas, when i try to accomodate for this on the js code, everything falls apart.

I have been looking at this: Write JSON parser to format data for pie chart (HighCharts)

but cant get the practice applied here to fit my circumstances.. Can anyone help?

Answer 1

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 ....

Answer 2

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)
});
});
}

Answer 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);
  });
}

Answer 4

You can set your points as follows:

    genderChart.series[0].addPoint({

        name: key_g,
        y: val_g

    });