Write JSON parser to format data for pie chart (HighCharts)

Question

I was fighting with HighCharts quite some hours for formatting the data input to the series option. Finally I saw the link here solved my problem for data formatting and input.

The data format that would be recognized by HighCharts pie chart is like this (format 1) as indicated by the link above:

[["chrome",15],["firefox",20]]

I actually want dynamic data input from external URL and format the data so that HighCharts can recognized it. The data format I got from the URL is like this (format 2):

[
    {
        "status": "Stopped \/ Idle",
        "val": 17.469444444444,
    }, {
        "status": "Working",
        "val": 0,
    }, {
        "status": "Headland Turning",
        "val": 0,
    }, {
        "status": "Transport",
        "val": 0.15333333333333,
    }
]

which is already in JSON format.

I just want to know that is that necessary for me to write a parser for the data from format 2 to format 1? Or Am I missing something that HighCharts can recognize the JSON format data and I don't actually need to write a parser?

I am new to HighCharts so feel free to point that out if some of my problem description does not make sense..Thank you!

EDIT: Thanks for all guys answering my question!

Keep in mind that the text you posted is not valid JSON. See json.org — ChaosPandion
– ChaosPandion, Commented Jun 28, 2012 at 20:36

charlietfl · Accepted Answer · 2012-06-28 21:09:12Z

6

When a script expects data in specific format, you often have to map your data to fit format. This can be modified in server code or using javascript

Can use jQuery $.map to reconfigure an object or array to another array.

DEMO: http://jsfiddle.net/qpsSe/1

Note that trailing commas in sample JSON need removing to validate JSON

/* "json" is your response object, modify variable names to match */
var chartData=$.map( json, function( obj,i){
        return [[ obj.status, obj.val]];                            
})

$.map API Docs

Alternate method in native javascript

var chartData=[];
for( i=0; i<json.length; i++){
   chartData.push( [ json[i]['status'], json[i]['val'] ])
}

edited Jun 28, 2012 at 21:09

answered Jun 28, 2012 at 20:53

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sozhen Over a year ago

Thanks, a very complete and thoughtful answer!

Ian Bishop · Accepted Answer · 2012-06-28 20:36:23Z

1

AFAIK that's just how Highcharts wants its data. That being said, the parser is pretty easy:

var data;  // this is your received data
var highchartsData = []; // this is data for highcharts

$.each(data, function(i, e) {
    highchartsData.push([e.status, e.val]);
});

One thing to note is that if the data you're receiving is in text (say, a response from an AJAX call) then you need to convert it to a javascript object like so:

var data = $.parseJSON(textData);

answered Jun 28, 2012 at 20:36

Ian Bishop

5,2153 gold badges28 silver badges37 bronze badges

Comments

pdjota · Accepted Answer · 2012-06-28 21:25:01Z

1

You need to make a parser when assigning options as stated in HighCharts preprocessing Basically, you parse the data and include it in the options:

var serie1 = json.map( function(e) {
    return [e.status, e.val];
});
options.series.push({data: serie1});

Here is a working example using $.map and options in Fiddle

answered Jun 28, 2012 at 21:25

pdjota

3,2533 gold badges26 silver badges33 bronze badges

Comments

dan-klasson · Accepted Answer · 2013-05-10 15:05:13Z

1

Since Highcharts 3.0, categories can also be extracted by giving each point a name and setting axis type to "category".

For a column bar chart this would be:

    xAxis: {
        type: 'category',
    },

    series: [{
        data: [{
            name: 'Point 1',
            color: '#00FF00',
            y: 1
        }, {
            name: 'Point 2',
            color: '#FF00FF',
            y: 5
        }]
    }]

answered May 10, 2013 at 15:05

dan-klasson

14.3k14 gold badges68 silver badges106 bronze badges

Comments

SteveP · Accepted Answer · 2015-06-16 12:24:02Z

0

You can bind chart with JSON data, directly. You just need to set the json property names as highchart standard. 'Y' for value and 'name' for label.

Your JSON should be as like follow:

[
    {
        name: "Stopped \/ Idle",
        y: 17.469444444444
    }, {
        name: "Working",
        y: 0
    }, {
        name: "Headland Turning",
        y: 0
    }, {
        name: "Transport",
        y: 0.15333333333333
    }
]

edited Jun 16, 2015 at 12:24

SteveP

19.2k9 gold badges49 silver badges62 bronze badges

answered Jan 20, 2014 at 9:32

aungye

2,3791 gold badge15 silver badges6 bronze badges

Collectives™ on Stack Overflow

Write JSON parser to format data for pie chart (HighCharts)

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related