How to implement angular js graphs with json data output

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • withravis
    New Member
    • Oct 2015
    • 2

    How to implement angular js graphs with json data output

    Code:
    .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 ?
    Last edited by withravis; Oct 28 '15, 09:51 AM. Reason: Not included the code inside the tags of [CODE][/CODE] ... so
  • kmartin
    New Member
    • Dec 2016
    • 7

    #2
    You're trying to use model as an array. You should declare your model as an array first in your init call. It should be

    Code:
    $scope.labels1 = [], $scope.data1 = [];
    Make sure this variable has declared in your controller init call. After that you've iterated the values and push the results in the data then you needn't to iterate again. Try below snippet

    Code:
    for (var i = 0; i < samplelineJsonData.length; i++)
    {    $scope.labels1.push(JSON.stringify(samplelineJsonData[i].month));
    $scope.data1.i = parseInt(samplelineJsonData[i].noOfUsers); //Because this is an object
    }

    Comment

    Working...