Display data in bar chart using angular-chart

Question

I am trying to display data on a bar chart using angular-chart. I am trying retrieving the data from a database. I want to display all data on the chart for the last five (5) years including this year and also get the data to correspond with the years. So far I am only using 2 yrs, as shown below.

Json Array enter image description here

Angularjs

app.controller('ChartCtrl', ['$scope', '$http', function ($scope, $http) {

  var currentYear = new Date().getFullYear();
  var allYrs = [];

  // get data from database
  $http.get('/dashboard/incident').success(function(incidents) {
    $scope.incidentCnt = incidents;
    console.log($scope.incidentCnt);

    for (var i = 0; $scope.incidentCnt.length; i++) {

      // Gets the current year and last 4 years (5 yrs total)
      for(var year = currentYear; year >= currentYear-4; year--) {

        allYrs.push(year);
        $scope.labels = allYrs; // display years

        $scope.series = [
          'Aggravated Assault', 
          'Arson', 
          'Burglary', 
          'Forcible Sex Offense', 
          'Hate Crime', 
          'Motor Vehicle Theft', 
          'Murder or Non-Negligent Manslaughter', 
          'Negligent Manslaughter', 
          'Non-Forcible Sex Offense', 
          'Relationship/Dating Violence', 
          'Robbery', 
          'Stalking'
        ];

        $scope.data = [
           [
            $scope.incidentCnt[i].assault, 
            $scope.incidentCnt[i].arson, 
            $scope.incidentCnt[i].burglary, 
            $scope.incidentCnt[i].fSexOffense, 
            $scope.incidentCnt[i].hateCrime, 
            $scope.incidentCnt[i].vehicleTheft, 
            $scope.incidentCnt[i].nonNegligentMaslaughter, 
            $scope.incidentCnt[i].negligentMaslaughter, 
            $scope.incidentCnt[i].nonForcibleSexOffense, 
            $scope.incidentCnt[i].rshipDatingViolence, 
            $scope.incidentCnt[i].robbery, 
            $scope.incidentCnt[i].stalking
           ]
         ];
      }
    };
  });

}]);

Chart's current look

enter image description here

Any help would be much appreciated. Thank you...

Pankaj Parkar · Answer 1 · 2015-04-12T18:19:42.427

I would simply create a custom filter to show last 5 years data

Filter

app.filter('for5Years', function(){
  return function(values){
    var returnValues = [], 
    date = new Date(), 
    currentYear = date.getFullYear(),
    limitYear = currentYear - 4;
    angular.forEach(values, function(value, index){
       if(value.incidentyear <= currentYear && value.incidentyear >= limitYear){
          returnValues.push(value);
       }
    });
    return returnValues;
  }
});

Controller

app.controller('ChartCtrl', ['$scope', '$http', '$filter', function($scope, $http, $filter) {

    var currentYear = new Date().getFullYear();
    var allYrs = [];

    // get data from database
    $http.get('/dashboard/incident').success(function(incidents) {
        $scope.incidentCnt = $filter('for5Years')(incidents); //this line will do filtering for you.
        console.log($scope.incidentCnt);

        //$scope.labels = allYrs; // display years logic to do
        for (var i = 0; $scope.incidentCnt.length; i++) {
            $scope.series = [
                'Aggravated Assault',
                'Arson',
                'Burglary',
                'Forcible Sex Offense',
                'Hate Crime',
                'Motor Vehicle Theft',
                'Murder or Non-Negligent Manslaughter',
                'Negligent Manslaughter',
                'Non-Forcible Sex Offense',
                'Relationship/Dating Violence',
                'Robbery',
                'Stalking'
            ];

            $scope.data = [
                [
                    $scope.incidentCnt[i].assault,
                    $scope.incidentCnt[i].arson,
                    $scope.incidentCnt[i].burglary,
                    $scope.incidentCnt[i].fSexOffense,
                    $scope.incidentCnt[i].hateCrime,
                    $scope.incidentCnt[i].vehicleTheft,
                    $scope.incidentCnt[i].nonNegligentMaslaughter,
                    $scope.incidentCnt[i].negligentMaslaughter,
                    $scope.incidentCnt[i].nonForcibleSexOffense,
                    $scope.incidentCnt[i].rshipDatingViolence,
                    $scope.incidentCnt[i].robbery,
                    $scope.incidentCnt[i].stalking
                ]
            ];
        }
    });

}]);

@pankajparker. When trying to console.log('$scope.incidentCnt') it returns 'undefined' — user2538755, Apr 12 '15 at 17:28
@pankajparker.For the filter, should it be **returnValues.push(value);** ? and in the browser's console it is saying that it "cannot read property length" — user2538755, Apr 12 '15 at 17:58
@user2538755 thats my bad missed to write return statement from filter check update in answer — Pankaj Parkar, Apr 12 '15 at 18:20
@pankajparker. I have made the necessary changes but now the console is giving me "cannot read property assault", and it says the same thing for the other items in $scope.data — user2538755, Apr 12 '15 at 18:42
@user2538755 I created a pseudo code..If you want accurate code from me then please provide me plunkr/fiddle i'll do it — Pankaj Parkar, Apr 12 '15 at 18:43

Display data in bar chart using angular-chart

1 Answers1