varun varun - 3 months ago 26
Javascript Question

How to Populate Highchart using Json Object

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

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

        }


    
    });

});