javascript - Parsing JSON data for Highcharts - Stack Overflow

admin管理员组

文章数量:1318573

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 acodate 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?

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 acodate 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?

• javascript
• json
• highcharts
• pie-chart

Share Improve this question Follow edited May 23, 2017 at 12:01 CommunityBot 111 silver badge asked Oct 16, 2012 at 18:01 OpentunedOpentuned 1,5171717 silver badges2121 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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);
  });
}

You can set your points as follows:

    genderChart.series[0].addPoint({

        name: key_g,
        y: val_g

    });

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

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

本文标签： javascriptParsing JSON data for HighchartsStack Overflow