Working with JSONP Object in Highcharts

Question

I have working JSONP being passed from my server. The JSONP (with the $.getJSON padding) looks like this:

        jQuery21009647691948339343_1398527630522([
{
"name": 'World Federation of Democratic Youth',
"data": [16]
},
{
"name": 'Poqilet',
"data": [13]
},
{
"name": 'United Society',
"data": [8]
},
{
"name": 'Japvia',
"data": [589]
},
{
"name": 'the Mars',
"data": [1]
},
{
"name": 'The Americas',
"data": [913]
},
{
"name": 'High Orion Alliance',
"data": [1]
}
])

The PHP script I am using to pass this to my client is this:

header("content-type: application/json"); 

$array = (file_get_contents('data.json'));   
echo $_GET['callback']. '('. ($array) . ')';

Now, when I get this object I want to put it into a Highcharts series

$(document).ready(function () {
var options = {
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Update Order'
},
xAxis: {
categories: ['Regions']
},
yAxis: {
min: 0,
title: {
text: 'Number of Nations'
}
},
legend: {
backgroundColor: '#FFFFFF',
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{}]
};
var url = "http://myserver.org/requestjsonp.php?callback=?";
$.getJSON(url, function (data) {
console.log(data);
options.series.data = data;
var chart = new Highcharts.Chart(options);
});
});  

This is not working and I do not understand why, as I have worked through the errors I was getting before. Now I get no errors in the console, I just get nothing.

If I paste the contents of the JSON into the series, I get what I want, although I have to take out the first "{" and the last "}" character. Is this the problem? How can I remove them from an object if they are required to be in the JSON so that it can get passed to the client?

.remove() and other jquery methods I tried to trim the data once I received it didn't work.

console.log(data) now provides an array of 7 objects, which I believe is in line with data.json (seven name/data pairs).

Thank you for your consideration! :)

Answer 1

It turns out the JSONP data was not formatted correctly for Highcharts, so what I did was made it look like this (with padding):

jQuery21009184384981635958_1398737380163([{"name": "Regions","data": ["World Federation of Democratic Youth", "Poqilet", "United Society", "Japvia", "the Mars", "The Americas", "High Orion Alliance"]},{"name": "Number of Nations","data": [16, 13, 5, 566, 1, 926, 1]}])

And the Javascript to utilize it:

$(document).ready(function() {
            var options = {
                chart: {
                    renderTo: 'container',
                    type: 'line',
                    marginRight: 130,
                    marginBottom: 25
                },
                title: {
                    text: 'Update Order',
                    x: -20 //center
                },
                subtitle: {
                    text: '',
                    x: -20
                },
                xAxis: {
                    categories: []
                },
                yAxis: {
                    title: {
                        text: 'Number of Nations'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    formatter: function() {
                            return '<b>'+ this.series.name +'</b><br/>'+
                            this.x +': '+ this.y;
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -10,
                    y: 100,
                    borderWidth: 0
                },
                series: []
            }

            $.getJSON('http://myserver.org/requestjsonp.php?callback=?', function(data) {
                options.xAxis.categories = data[0]['data'];
                options.series[0] = data[1];
                chart = new Highcharts.Chart(options);
            });
        });

This works for the small JSONP excerpt that I posted, but not for my full set of data, which contains over 10,000 values and was throwing up a Highcharts Error 19 (http://www.highcharts.com/errors/19) message, so I will be trying to do a master-detail chart to deal with the large amount of data, but this should work for you if you have a small dataset.

For more on how highcharts data should be formatted, you can go here: http://www.highcharts.com/docs/chart-concepts/series/#1

Answer 2

Your JSONP is incorrect. Without the padding it would look like:

{
    name: 'World Federation of Democratic Youth',
    data: [16]
},
{
    name: 'Poqilet',
    data: [13]
},

This is not valid JSON. It should probably look like:

[{
    "name": "World Federation of Democratic Youth",
    "data": [16]
},
{
    "name": "Poqilet",
    "data": [13]
}]

You probably also just want to do options.series = data since data will be an array.

Answer 3

In your JSON you have structre of series, not points. Because you use data[] paramter inside. In other words it should be:

options.series = data;