How to implement angular js graphs with json data output

.controller('HomeCtrl', function ($scope, $http, $stateParams, $state) {
    
    var samplelineJsonData = [  
                            {
                                "month": "Jan",
                                "noOfUsers": "65"
                            },
                            {
                                "month": "Feb",
                                "noOfUsers": "59"
                            },
                            {
                                "month": "Mar",
                                "noOfUsers": "80"
                            },
                            {
                                "month": "Apr",
                                "noOfUsers": "81"
                            },
                            {
                                "month": "May",
                                "noOfUsers": "56"
                            },
                            {
                                "month": "Jun",
                                "noOfUsers": "55"
                            },
                            {
                                "month": "Jul",
                                "noOfUsers": "40"
                            }
                          ];                          
        
    $scope.labels1 = [], $scope.data1 = [];        
    for (var i = 0; i < samplelineJsonData.length; i++) {
        $scope.labels1.push(JSON.stringify(samplelineJsonData[i].month));
        $scope.data1.i = parseInt(samplelineJsonData[i].noOfUsers); 
        //$scope.data1.push(parseInt(samplelineJsonData[i].noOfUsers));
    }    
   
    //alert("data1 : "+$scope.data1); return false;    
    $scope.series1 = ['Users'];
    $scope.data1 = [[65, 59, 80, 81, 56, 55, 40]]; //lineData; //[[65, 59, 80, 81, 56, 55, 40] ];
    
    $scope.labels2 = ["January", "February", "March", "April"];
    $scope.series2 = ['Users'];
    $scope.data2 = [
                      [81, 56, 55, 40]
                   ];    
  
    //Iterating thru the json output Start    
   
    //Iterating thru the json output End
    
})

The above code doesnt assign values for $scope.data1 as [[65, 59, 80, 81, 56, 55, 40]] from the for () loop traversed … May I know whats the issue ?

You’re using scope.data.i, while that should be scope.data[i].

A more idiomatic way of assigning your labels and data would be

$scope.labels1 = samplelineJsonData.map( function (data) {
    return JSON.stringify(data.month);
});

$scope.data1 = samplelineJsonData.map( function (data) {
    return parseInt(data.noOfUsers);
});

Edit: thinking of it, depending on what you’re trying to do, you might as well just publish the sample data on the scope and ng-repeat over it, because it seems you’re building a form of table output.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.