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

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 2

You can set your points as follows:

    genderChart.series[0].addPoint({

        name: key_g,
        y: val_g

    });

Answer 3

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

[{"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 4

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