CODEWITHSUNDEEP
javascriptjqueryjsonhighcharts
amol01
amol01

Reputation: 1863

Dynamically feeding the column based highcharts from json assosiative array in jquery?

I am having a small issues with creating column based highcharts, namely with feeding the series data and categories.

The feeding part of jquery: 

    success: function (data){
             for(var i in data){
                    for(var j in data[i]){

                        options.series.push({});
                        options.xAxis.categories = data[i][j].categories;
                        options.series[i].name = j;
                            options.series[i].data = data[i][j].values;


                            break;


                    }
                }   
                var chart = new Highcharts.Chart(options);

    }

it is working fine always with the first categories name sports, but the second categories name are not shown, but instead number 1 is shown.

The json data structure: 

          [{"root":{"categories":["sports","occupation"],"values":[53.571,62.5]}},{"admin":{"categories":["sports"],"values":[33.333]}}]

Basically, root and admin are series name - they are shown properly.

With showing categories I have a problem: it shows only the first sport, second one is shown is 1 (number 1)

Series values are shown properly.

So the only problem is with series name.

Any idea what is going on?

Any help appreciated.

Upvotes: 0

Views: 643

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

It's caused by overwritting categories for each object in data. admin has categories with just one element and is last one in data array, so this is displayed. I think you can simply compare length of categories to use categories with the longest number of points. For example: http://jsfiddle.net/2TuCW/68/

var data = [{
    "root": {
        "categories": ["sports", "occupation"],
        "values": [53.571, 62.5]
    }
}, {
    "admin": {
        "categories": ["sports"],
        "values": [33.333]
    }
}];

var options = {
    chart: {
        renderTo: 'container'
    },
    xAxis: {
        categories: []
    },
    series: []
}

for (var i in data) {
    for (var j in data[i]) {

        options.series.push({});
        if(options.xAxis.categories.length < data[i][j].categories.length) 
            options.xAxis.categories = data[i][j].categories;
        options.series[i].name = j;
        options.series[i].data = data[i][j].values;

        break;
    }
}
var chart = new Highcharts.Chart(options);

Upvotes: 1

Related Questions