angular

app.js

"use strict";

var app = angular.module('charts',['charts.services', 'charts.directives']);

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
    when('/', {
        controller: 'MenuCtrl',
        templateUrl:'/users.html'
    }).
    when('/users/:id', {
        controller: 'ChartCtrl',
        resolve: {
            data: function(UserDataLoader) {
            return UserDataLoader();
            }
        },
        templateUrl:'/user/chart.html'
    }).
    otherwise({redirectTo:'/'});
}]);

controllers.js

"use strict";

app.controller('ChartCtrl', ['$scope', 'data', function($scope, data){
    console.log(data);
    var dates = new Array;
    for (var i=0; i<data.length; i++) {
        var str = data[i].date.day.toString() + '.' + data[i].date.month.toString() + '.' + data[i].date.year.toString();
        dates.push(str);
    }

    var datasets = [{

        fillColor : "rgba(151,57,105,0.5)",
        strokeColor : "rgba(151,57,105,1)",
        pointColor : "rgba(151,57,105,1)",
        pointStrokeColor : "#fff",
        data: new Array
    },{
        fillColor : "rgba(51,187,205,0.5)",
        strokeColor : "rgba(51,187,205,1)",
        pointColor : "rgba(51,187,205,1)",
        pointStrokeColor : "#fff",
        data: new Array
    },{
        fillColor : "rgba(151,187,5,0.5)",
        strokeColor : "rgba(151,187,5,1)",
        pointColor : "rgba(151,187,5,1)",
        pointStrokeColor : "#fff",
        data: new Array
    },{
        fillColor : "rgba(151,87,205,0.5)",
        strokeColor : "rgba(151,87,205,1)",
        pointColor : "rgba(151,87,205,1)",
        pointStrokeColor : "#fff",
        data: new Array
    }];

    for (var i=0; i<data.length; i++) {
        datasets[0].data[i]=0;
        datasets[1].data[i]=0;
        datasets[2].data[i]=0;
        datasets[3].data[i]=0;

        for (var j=0; j<data[i].requests.length; j++) {
            if (data[i].requests[j].method == 'GET'){datasets[0].data[i] = data[i].requests[j].count}
            if (data[i].requests[j].method == 'POST'){datasets[1].data[i] = data[i].requests[j].count} 
            if (data[i].requests[j].method == 'PUT'){datasets[2].data[i] = data[i].requests[j].count} 
            if (data[i].requests[j].method == 'DELETE'){datasets[3].data[i] = data[i].requests[j].count}  
    }}

    var userdata = {
        labels : dates,
        datasets : datasets
    };

    var userchart = document.getElementById('userChart').getContext("2d");
    userchart.canvas.width = document.getElementById('can').offsetWidth;
    new Chart(userchart).Line(userdata,{datasetFill : false});
    Holder.run();
}]);

app.controller('MenuCtrl', ['$scope', '$http', function($scope, $http){
        $http.get('/users',{cache: true}).success(function(data){
            $scope.users = data;
        });
}]);

directives.js

"use strict";

var directives = angular.module('charts.directives', []);

directives.directive('ngid', [function() {
    return {
        link: function(scope, element, attrs, controller) {
            console.log('adasdasdssd');
            element[0].id;
    }
    };
}]);

services.js

"use strict";

var services = angular.module('charts.services', ['ngResource']);

services.factory('UserData', ['$resource', function($resource){
    return $resource('/users/:id');
}]);

services.factory('UserDataLoader', ['UserData', '$q', '$route', function(UserData, $q, $route){
    return function(){
        var delay = $q.defer();
        UserData.query({id: $route.current.params.id},function(data){
            delay.resolve(data);
        });
        return delay.promise;
    };
}]);

users.html

<div class="col col-lg-10">
<a ngid href="#">asd</a>
    <a class="btn btn-default" ng-repeat="user in users" href="#/users/{{user}}">{{user}}</a>
</div>