How to fetch json array data into highcharts in angularjs

Question

I want to display a bar graph using highcharts.I am devoloping an app in play framework(play-java),in which I return a response from the java api which contains data in json format.It contains a field 'name' which contains data like 'Data','Gadgets','Others' etc.I want the x axis of the chart to take these values from json array which gets returned in response.

Here is the code for the response in .js

for(var i=0;i<response.data.result.length;i++)
        {
            $scope.total=$scope.total+parseInt(response.data.result[i].item_price);
        }
        var j=0;
    console.log(response.data.result);
            while(j<response.data.result.length)
            {
                $scope.jsonArray=[{
                    name:response.data.result[j].category_name,
                    y: (parseInt(response.data.result[j].item_price)/$scope.total)*100,

                }]
                $scope.renderChart();
            }

The code for bar graph

$scope.renderChart = function()
{
    Highcharts.chart('container', {
        chart: {
            type: 'column'
        },
        title: {
            text: 'Your Expenses'
        },
        subtitle: {
            text: 'Your total spent money is '+$scope.total+'.'
        },
        xAxis: {
            type: 'category'
        },
        yAxis: {
            title: {
                text: 'Money spent in percentage'
            }

        },
        legend: {
            enabled: false
        },
        credits: {
            enabled: false
            },
        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    format: '{point.y:.1f}%'
                }
            }
        },

        tooltip: {
            headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
            pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
        },

        series: [{
            name: 'Categories',
            colorByPoint: true,
            data:$scope.jsonArray
         }]
    });
}

I know that I can't use the while loop in the response code mentioned.That's where i am looking help for.The y axis should calculate the percentage value .I want to generate 'names' for x axis and percentage for y axis of the chart.Thanks in advance..

Answer 1

All we have to do is to just initialize the jsonArray as empty before doing the looping.Add a for loop so that it iterates through the array and assigns the values appropriately. The changed code

$scope.jsonArray = [];
            for(var i=0;i<response.data.result.length;i++)
            {
                $scope.jsonArray[i]={
                    name:response.data.result[i].category_name,
                    y: (parseInt(response.data.result[i].item_price)/$scope.total)*100,

                }
                $scope.renderChart();
                console.log(response.data.result[i]);
            }

    console.log($scope.jsonArray);
    })

Anyway thanks....