如何使用动态数据使用高图获取角度的柱形图

Question

I am implemented the high charts in angular js ,It is working fine with hard coded data but it is not working when data came from web service dynamically . In my controller :

$scope.months = [];
                $scope.retail = [];
                $scope.wholesale = [];

                $scope.fetchChart = function(){
                    $scope.chartConfig = {
                            title: {
                                text: ""
                            },

                            options: {
                                chart: {
                                    type: 'column'
                                },
                                plotOptions: {
                                    series: {
                                      stacking: ''
                                    }
                                  },
                                legend: {
                                    layout: 'vertical',
                                    align: 'topleft',
                                    verticalAlign: 'top',
                                    borderWidth: 1
                                }
                            },
                            xAxis: {
                                categories: $scope.months
                            },
                            credits: {
                                enabled: true
                            },
                            series: [{
                                name: 'Retail',
                                data: $scope.retail
                            },
                            {
                                name: 'Wholesale',
                                data: $scope.wholesale
                            }
                            ],

                            loading: false
                    }
                };



                $http.get(http://localhost:8080/abc/pqr/mno/getData).success(function(response) {
                    $scope.data = angular.fromJson(response);
                    $scope.comlete = false;
                    var count=0;
                    for(var i = 0; i < $scope.data.length; i++){
                        count++;
                        $scope.months.push($scope.data[i].month);
                        $scope.retail.push($scope.data[i].retail);
                        $scope.wholesale.push($scope.data[i].wholesale);
                        if(count == $scope.data.length){
                            $scope.fetchChart();
                            $scope.comlete = true;
                        }
                    }

                    $scope.toggleHighCharts = function () {
                        this.chartConfig.useHighStocks = !this.chartConfig.useHighStocks
                    }


                    $scope.$watch("comlete",function(){
                        alert(JSON.stringify($scope.months)+"---"+JSON.stringify($scope.retail)+"=-=--"+JSON.stringify($scope.wholesale));
                      },true);

                    $scope.reflow = function () {
                        $scope.$broadcast('highchartsng.reflow');
                    };

                });

                $scope.chartTypes = [
                                     {"id": "line", "title": "Line"},
                                     {"id": "spline", "title": "Smooth line"},
                                     {"id": "area", "title": "Area"},
                                     {"id": "areaspline", "title": "Smooth area"},
                                     {"id": "column", "title": "Column"},
                                     {"id": "bar", "title": "Bar"},
                                     {"id": "pie", "title": "Pie"},
                                     {"id": "scatter", "title": "Scatter"}
                                     ];

                $scope.dashStyles = [
                                     {"id": "Solid", "title": "Solid"},
                                     {"id": "ShortDash", "title": "ShortDash"},
                                     {"id": "ShortDot", "title": "ShortDot"},
                                     {"id": "ShortDashDot", "title": "ShortDashDot"},
                                     {"id": "ShortDashDotDot", "title": "ShortDashDotDot"},
                                     {"id": "Dot", "title": "Dot"},
                                     {"id": "Dash", "title": "Dash"},
                                     {"id": "LongDash", "title": "LongDash"},
                                     {"id": "DashDot", "title": "DashDot"},
                                     {"id": "LongDashDot", "title": "LongDashDot"},
                                     {"id": "LongDashDotDot", "title": "LongDashDotDot"}
                                     ];

                $scope.chartSeries = [
                                      {"name": "Retail", "data": $scope.retail, type: "column"},
                                      {"name": "Wholesale", "data": $scope.wholesale, type: "column"}
                                      ];

In My Html :

<div>
    <highchart id="chart1"  config="chartConfig"></highchart>
</div>

In Controller for the statements:

$scope.data = angular.fromJson(response);

I got the data as

[{"wholesale":"1","retail":"0","month":"Jan"},
{"wholesale":"2","retail":"0","month":"May"},
{"wholesale":"0","retail":"1","month":"Jun"},
{"wholesale":"0","retail":"2","month":"Jul"}]

In Controller for the statements:

$scope.$watch("comlete",function(){
                        alert(JSON.stringify($scope.months)+"---"+JSON.stringify($scope.retail)+"=-=--"+JSON.stringify($scope.wholesale));
                      },true);

I got data as:

["Jan","May","Jun","Jul"]---["0","0","1","2"]=-=--["1","2","0","0"]

and in series:

series: [{  name: 'Retail',
            data: $scope.retail
        },
        {   name: 'Wholesale',
            data: $scope.wholesale
        }
        ],

when i replace data: $scope.retail with data: [250,500,1500,1800]//$scope.retail and data: $scope.wholesale with data: [700,800,200,1300]//$scope.wholesale it is working .How can i get the chart with dynamic data.

Answer 1

Answer to the Problem:-

I solved the problem by myself. I am answering the solution for my future reference and in case it helps somebody having the same requirement.

$scope.$watch("comlete",function(){
                        alert(JSON.stringify($scope.months)+"---"+JSON.stringify($scope.retail)+"=-=--"+JSON.stringify($scope.wholesale));
                      },true);

In the above statements the $scope.retail and $scope.wholesale data as string of arrays , the statement

 series: [{
           name: 'Retail',
           data: $scope.retail
           },
           {
           name: 'Wholesale',
           data: $scope.wholesale
           }
           ],

series is not accepting the data as string ,By converting the string of numbers into numbers (converting string to number type) then it is accepting the series . the answer statements are :

if(angular.isNumber($scope.data[i].retail))
{
 $scope.retail.push($scope.data[i].retail);
}else{
    $scope.retail.push(+$scope.data[i].retail);
    }
if(angular.isNumber($scope.data[i].wholesale))
{
$scope.wholesale.push($scope.data[i].wholesale);
}else{
$scope.wholesale.push(+$scope.data[i].wholesale);
}

instead of

$scope.retail.push($scope.data[i].retail);
 $scope.wholesale.push($scope.data[i].wholesale);

These two statement in for loop.