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


            }
    });

});

You have placed two script samples. The first one shows no data, right? What is wrong with the second one? There's no description. Your first script has explicit fail data: value[i].year at yAxis. You should start removing it. There's no value[i] at that moment — Igor Popov
– Igor Popov, Commented May 28, 2015 at 12:16

Varun · Accepted Answer · 2015-05-28 12:24:37Z

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

        }


    
    });

});

Divyang Desai · Accepted Answer · 2016-08-26 13:04:32Z

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

Collectives™ on Stack Overflow

How to Populate Highchart using Json Object

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related