Question

I have a json object which I am trying to add to my highcharts options.

I am able to recieve the object via API, and pass it to my highcharts function, But I am unable to add my data to the static data around it.

        var datas;
        datas = getData();
        //getdata();

        alert('2datass'+datas);
        console.log(datas);
        createChart(datas);


        function createChart(data){

            alert('createChart'+data); // works - outputs createChart[object Object][object Object][object Object][object Object][object Object]
            var dynamicData;


                    for(var i =0;i <= data.length-1;i++)
                    {
                        var item = data[i];

                        dynamicData = dynamicData + {
                            type: 'column',
                            name: item.name,
                            data: [item.difference]
                        };

                    }

            alert('dynamic' +dynamicData); // works, but says undefined before - outputs dynamic undefined[object Object][object Object][object Object][object Object][object Object]



            var series = [data /*This is where my data should sit*/,{
                    type: 'column',
                    name: 'Jane',
                    data: [300, 30]
                }, {
                    type: 'column',
                    name: 'John',
                    data: [-200, 50]
                }, {
                    type: 'column',
                    name: 'Joe',
                    data: [444, -25]
                }, {
                    type: 'column',
                    name: 'Jobe',
                    data: [444, -25]
                }, {
                    type: 'column',
                    name: 'Jooe',
                    data: [444, -25]
                },{
                    type: 'column',
                    name: 'Jane',
                    data: [300, 30]
                }
                , {
                    type: 'pie',
                    name: 'Total consumption',
                    data: [{
                            name: 'Jane',
                            y: 13
                            //color: '#4572A7' // Jane's color
                        }, {
                            name: 'John',
                            y: 23
                            //color: '#AA4643' // John's color
                        }, {
                            name: 'Joe',
                            y: 19
                            //color: '#89A54E' // Joe's color
                        }],
                    center: [30, 80],
                    size: 100,
                    showInLegend: false,
                    dataLabels: {
                        enabled: false
                    }
                }];




            var options = {
                chart: {
                    renderTo: 'container'
                },
                title: {
                    text: 'Account Managers Leaderboard'
                },
                xAxis: {
                    categories: ['Month on Month', 'Day on Day']
                },
                tooltip: {
                    formatter: function() {
                        var s;
                        if (this.point.name) { // the pie chart
                            s = ''+
                                this.point.name +': '+ this.y +' sales';
                        } else {
                            s = ''+
                                this.x  +': '+ this.y;
                        }
                        return s;
                    }
                },
                labels: {
                    items: [{
                            html: 'Total proportion of sales <br />this month',
                            style: {
                                left: '40px',
                                top: '-5px',
                                color: 'black'
                            }
                        }]
                },
                series: series
            };

            $(document).ready(function() {
                var chart;
                chart = new Highcharts.Chart(options);
            });

        }



       function getData(){
            //alert('ajax');

            var receivedData; // store your value here
            $.ajax({
                type: "GET",
                dataType: "json",
                url: "API URL",
                async: false,
                success: function(data){
                    alert('data'+data); //works
                    receivedData = data;
                }
            }); 

            return receivedData;
        };

My solution seems to be the wrong one as the dynamic data is not being added. Any help would be greatly appreciated.

UPDATED CODE:

 var dynamicData = {
                    type: 'column',
                    name: 'FIRST',
                    data: [300, 30]
                };

            //Without the following loop, my chart will display the above entry "FIRST"
            //With the loop, the chart omits everything in dynamicData
                    for(var i =0;i <= data.length-1;i++)
                    {
                        var item = data[i];

                        dynamicData = dynamicData + {
                            type: 'column',
                            name: item.name,
                            data: [item.difference]
                        };

                    }

            alert('dynamic' +dynamicData); // works, but says undefined before - outputs dynamic undefined[object Object][object Object][object Object][object Object][object Object]


                //dynamicData should be 'FIRST' and then 5 other returned rows
            var series = [dynamicData, {
                    type: 'column',
                    name: 'John',
                    data: [-200, 50]
                }, {
                    type: 'column',
                    name: 'Joe',
                    data: [444, -25]
                }, {
                    type: 'column',
                    name: 'Jobe',
                    data: [444, -25]
                }, {
                    type: 'column',
                    name: 'Jooe',
                    data: [444, -25]
                },{
                    type: 'column',
                    name: 'Jane',
                    data: [300, 30]
                }
                , {
                    type: 'pie',
                    name: 'Total consumption',
                    data: [{
                            name: 'Jane',
                            y: 13
                            //color: '#4572A7' // Jane's color
                        }, {
                            name: 'John',
                            y: 23
                            //color: '#AA4643' // John's color
                        }, {
                            name: 'Joe',
                            y: 19
                            //color: '#89A54E' // Joe's color
                        }],
                    center: [30, 80],
                    size: 100,
                    showInLegend: false,
                    dataLabels: {
                        enabled: false
                    }
                }];

AMENDED CODE, USING .push:

                // series has been moved straight into the options variable
                var options = {
                chart: {
                    renderTo: 'container'
                },
                title: {
                    text: 'Account Managers Leaderboard'
                },
                xAxis: {
                    categories: ['Month on Month', 'Day on Day']
                },
                tooltip: {
                    formatter: function() {
                        var s;
                        if (this.point.name) { // the pie chart
                            s = ''+
                                this.point.name +': '+ this.y +' sales';
                        } else {
                            s = ''+
                                this.x  +': '+ this.y;
                        }
                        return s;
                    }
                },
                labels: {
                    items: [{
                            html: 'Total proportion of sales <br />this month',
                            style: {
                                left: '40px',
                                top: '-5px',
                                color: 'black'
                            }
                        }]
                },
                series: [{
                        type: 'pie',
                        name: 'Total consumption',
                        data: [{
                                name: 'Jane',
                                y: 13
                                //color: '#4572A7' // Jane's color
                            }, {
                                name: 'John',
                                y: 23
                                //color: '#AA4643' // John's color
                            }, {
                                name: 'Joe',
                                y: 19
                                //color: '#89A54E' // Joe's color
                            }],
                        center: [30, 80],
                        size: 100,
                        showInLegend: false,
                        dataLabels: {
                            enabled: false
                        }
                    }]
            };


            //I can now push data straight to seriese (although item.difference doesn't       
            // work .. perhaps because it's an array)

            for(var i =0;i <= data.length-1;i++)
            {
                var item = data[i];

                options.series.push({
                    "type": "column",
                    "name": item.name,
                    "data": item.data
                });
                alert('datavalue' +item.data);       
            }


               $(document).ready(function() {
                var chart;
                chart = new Highcharts.Chart(options);
            });

ANSWER!

This seems to do the trick. Thank you to Speransky Danil for struggling along with me – much appreciated.

        var datas;
        datas = getData();
        createChart(datas);


        function createChart(data){

            var options = {
                chart: {
                    renderTo: 'container'
                },
                title: {
                    text: 'Account Managers Leaderboard'
                },
                xAxis: {
                    categories: ['Month on Month', 'Day on Day']
                },
                tooltip: {
                    formatter: function() {
                        var s;
                        if (this.point.name) { // the pie chart
                            s = ''+
                                this.point.name +': '+ this.y +' sales';
                        } else {
                            s = ''+
                                this.x  +': '+ this.y;
                        }
                        return s;
                    }
                },
                labels: {
                    items: [{
                            html: 'Total proportion of sales <br />this month',
                            style: {
                                left: '40px',
                                top: '-5px',
                                color: 'black'
                            }
                        }]
                },
                series: [{
                        type: 'pie',
                        name: 'Total consumption',
                        data: [{
                                name: 'Jane',
                                y: 13
                                //color: '#4572A7' // Jane's color
                            }, {
                                name: 'John',
                                y: 23
                                //color: '#AA4643' // John's color
                            }, {
                                name: 'Joe',
                                y: 19
                                //color: '#89A54E' // Joe's color
                            }],
                        center: [30, 80],
                        size: 100,
                        showInLegend: false,
                        dataLabels: {
                            enabled: false
                        }
                    }]
            };




            for(var i =0;i <= data.length-1;i++)
            {
                var item = data[i];

                options.series.push({
                    "type": "column",
                    "name": item.name,
                    "data": [item.data]
                });

            }



















            $(document).ready(function() {
                var chart;
                chart = new Highcharts.Chart(options);
            });

        }



        function getData(){
            //alert('ajax');

            var receivedData; // store your value here
            $.ajax({
                type: "GET",
                dataType: "json",
                url: "API URL",
                async: false,
                success: function(data){
                    alert('data'+data); //works
                    receivedData = data;
                }
            }); 

            return receivedData;
        };

Answer 1

The problem is in the loop which contains:

dynamicData = dynamicData + {
   type: 'column',
   name: item.name,
   data: [item.difference]
};

First time dynamicData is undefined. When we sum undefined and Object we convert both of them to string and concatinate it, so you get string 'undefined'[object Object]', then 'undefined[object Object][object Object]' and so on (converted to string object is '[object Object]').