How to Populate Highchart using Json Object

Question

I am trying to populate highchart from server side using json object.frankly speaking I have average knowledge of jquery and highchart. I am newbie in json, jquery and highchart. I am able to receive the json object from server side but facing issue while populating highchart. can any body help me with this.

my json object receive from server look like this

[Object { year=2001,  populations=10000}, Object { year=2002,  populations=20000}, Object { year=2003,  populations=30000}, Object { year=2004,  populations=40000}, Object { year=2005,  populations=50000}, Object { year=2006,  populations=60000}, Object { year=2007,  populations=70000}]

my script to populate the highchart is

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: 'dispatcherServlet/reportController/getreport',
        dataType: "json",
        contentType: "application/json",
        crossDomain: true,
        success: function (data) {
            console.log(data);
            var name = Array();
            var value = Array();
            var dataArrayFinal = Array();
            for (i = 0; i < data.length; i++) {
                name[i] = data[i].year;
                value[i] = data[i].populations;
            }
            for (var j = 0; j < name.length; j++) {
                var temp = new Array(name[j], value[j]);
                dataArrayFinal[j] = temp;
            }
            // draw chart
            $('#container').highcharts({
                chart: {
                    type: "column"
                },
                title: {
                    text: "City Population"
                },
                xAxis: {
                    allowDecimals: false,
                    title: {
                        text: "Year"
                    }
                },
                yAxis: {
                    title: {
                        text: "Population",
                        data: value[i].year

                    }

                },
                series: [{
                    data: dataArrayFinal
                }]
            });

        }


    });

});

When I am simply passing my data receive from server to highchart series. I am getting balnk highchart.

The second script look like this

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: '/dispatcherServlet/reportController/getreport',
        dataType: "json",
        contentType: "application/json",
        crossDomain: true,
        success: function (data) {
            console.log(data);

            for (var i = 0; i < data.length; i++) {
               // alert(data[i].year);
               // alert(data[i].populations);

                // draw chart
                $('#container').highcharts({
                    chart: {
                        type: "column"
                    },
                    title: {
                        text: "City Population"
                    },
                    xAxis: {
                        allowDecimals: false,
                        title: {
                            text: "Year"
                        }
                    },
                    yAxis: {
                        title: {
                            text: "Population",
                           
                            
                        }
                    
                    },
                    series: [{
                        data: data
                    }]
                });
                
            }


            }
    });

});

Answer 1

[ { "year":2001, "populations":10000}, 
  { "year":2002,"populations":20000}, 
  { "year":2003, "populations":30000},
  { "year":2004, "populations":40000}, 
  { "year":2005, "populations":50000},
  { "year":2006, "populations":60000}, 
  { "year":2007, "populations":70000}
]




    var title = prompt("Please enter Title of your Chart: ", "");

  //  var chart = $('#container').highcharts();
    var x=new Array();

    //var product = prompt("Please enter Column Name: ", "");
    var stock = prompt("Please enter Y Axis Name: ", "");
    //var name = prompt("Please enter Series Name: ", "");

    $(function () {



            var text="Stock Level";
            var y=new Array();
            var attr="";
            var processed_json = new Array(); 

            $.getJSON('data2.json', function(data) {      //Getting data from JSON file

                //var keys=new Array();

                var obj=JSON.stringify(data[1]);
                //alert(obj);
                attr=JSON.stringify(obj.substring(2,obj.indexOf(":")-1))
                //alert(JSON.stringify(obj.substring(2,obj.indexOf(":")-1)));
                var attr1=attr.substring(1,attr.length-1);
                //alert(attr1);
                //alert(attr1);

                $.each(data, function(key, value)
                {

            //  var yName="Stock";

                //var product="ProductId";

                var idd=value[attr1];
                //Getting Values of 1st Attribute that has to be represented along X-axis
                x.push(idd);
                //Getting Values of 2nd attribute that has to be represented along Y-axis
                y.push(value.populations);


                //$("ul").append("<li>"+value.ProductId+" "+value.Stocklevel+"<li>")
                });

                            // draw chart
                $('#container').highcharts({


                chart: {
                    type: "column"
                },
                title: {
                    text: title
                },
                xAxis: {
                    categories: x,              //Populating X-axis
                    type: 'category',
                    allowDecimals: false,
                    title: {
                        text: ""
                    }
                },
                yAxis: {
                    title: {
                        text: stock
                    }
                },
                series: [
                {

                    name: name ,
                    data:y                      //Populating Y-axis
                }
                ]
            }); 
        });
    });

Answer 2

Finally it worked

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: '/dispatcherServlet/reportController/getreport',
        dataType: "json",
        contentType: "application/json",
        crossDomain: true,
        success: function (data) {
            console.log(data);

            // Populate series
            var processed_json = new Array();
            for (i = 0; i < data.length; i++) {
                processed_json.push([data[i].year, parseInt(data[i].populations)]);
            }

            // draw chart
            $('#container').highcharts({
                chart: {
                    type: "column"
                },
                title: {
                    text: "City Population"
                },
                xAxis: {
                    allowDecimals: false,
                    title: {
                        text: "Year"
                    }
                },
                yAxis: {
                    title: {
                        text: "Population"


                    }

                },
                series: [{
                    data: processed_json
                }]
            });

        }


    
    });

});