javascript - Highcharts: How to load data from JSON to xAxis.categories and series.data? - Stack Overflow

admin管理员组

文章数量:1332389

Sorry for the beginner question.

This is how my JSON looks like:

[
   ["junior college", "Primary", "secondary", "polytechnic"],
   ["4", "3", "1", "1"]
]

And this is my HTML,

var chart; // global
var options = {
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'bar'
    },
    title:{
        text: 'No. Schools for different levels'
    },
    xAxis:{
        title:'Education Level',
        categories:[]
    },
    yAxis:{
        title:{
            text:'No. Of Schools'
        }
    },
    series:[{
        name: "No. Schools",
        data: []
    }]
};

$.getJSON('loadData.php', function(JSONresult) {
    yData = options.series[0].data; //Array to store data for y column
    xData = options.xAxis.categories; //Array to store data for x column

    xDataObj = JSONresult[0];
    yDataObj = JSONresult[1];

    for(var key in xDataObj){
        xData.push(xDataObj[key]);
    }

    for(var key in yDataObj){
        yData.push(parseFloat(yDataObj[key]));
    }

I tried to execute the code, firebug shows no error but the chart never shows up. Could you help point out where did I go wrong?

Sorry for the beginner question.

This is how my JSON looks like:

[
   ["junior college", "Primary", "secondary", "polytechnic"],
   ["4", "3", "1", "1"]
]

And this is my HTML,

var chart; // global
var options = {
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'bar'
    },
    title:{
        text: 'No. Schools for different levels'
    },
    xAxis:{
        title:'Education Level',
        categories:[]
    },
    yAxis:{
        title:{
            text:'No. Of Schools'
        }
    },
    series:[{
        name: "No. Schools",
        data: []
    }]
};

$.getJSON('loadData.php', function(JSONresult) {
    yData = options.series[0].data; //Array to store data for y column
    xData = options.xAxis.categories; //Array to store data for x column

    xDataObj = JSONresult[0];
    yDataObj = JSONresult[1];

    for(var key in xDataObj){
        xData.push(xDataObj[key]);
    }

    for(var key in yDataObj){
        yData.push(parseFloat(yDataObj[key]));
    }

I tried to execute the code, firebug shows no error but the chart never shows up. Could you help point out where did I go wrong?

• javascript
• json
• highcharts

Share Follow edited Jul 3, 2011 at 21:20 NT3RP 15.4k99 gold badges6363 silver badges9797 bronze badges asked Jul 3, 2011 at 16:17 GerardGerard 51333 gold badges77 silver badges1414 bronze badges 2

• 2 Is there something missing from your code? It looks like you never actually create a new instance of your chart. – NT3RP Commented Jul 3, 2011 at 20:37
• @NT3RP sorry, i forgot to put the instantiate code here, i did initialize it with chart = new Highcharts.Chart(options); but the chart never shows up. Thank you! – Gerard Commented Jul 3, 2011 at 23:57

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

I found out the solution.

In my php script, I have to cast integer to the series data,

(int)$variable;

so the JSON out put would be

[4, 3, 1, 1]

and the chart will be rendered.

Thank you ppl :)

You need to do something like this to instantiate and render the chart:

chart = new Highcharts.Chart(options);

This could go at the end of your getJSON response function.

本文标签： javascriptHighcharts How to load data from JSON to xAxiscategories and seriesdataStack Overflow