Line Chart with Angular-nvD3

(function(){
    'use strict';

    var modules = [
        'ngNewRouter',
        'nvd3',
        'app.userAttendances',
        'app.accumulatedAttendanceChart'
    ];

    angular.module('app', modules)
           .controller('AppController', AppController);

    AppController.$inject = ['$router'];

    function AppController($router) {
        $router.config([
            {
                path: '/accumulated-attendance-chart',
                component: 'accumulated-attendance-chart'
            }
        ]);
    }
})();

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <meta charset="utf-8" />
    <title>Angular-nvD3 Line Chart</title>
    <script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <script data-require="angular-route@*" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-route.js"></script>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css" />
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
    <script src="https://rawgit.com/krispo/angular-nvd3/v1.0.4/dist/angular-nvd3.js"></script>
    <script src="app.js"></script>
    <script src="accumulated-attendance-chart.js"></script>
    <script src="user-attendances.service.js"></script>
  </head>

  <body ng-controller="AppController">
    <br />
    <a href="http://krispo.github.io/angular-nvd3/" target="_blank" style="float: right;">See more</a>
  </body>

</html>

/* Put your css in here */
.dashed {
    stroke-dasharray: 5,5;
}

Read more about Angular-nvD3:
http://krispo.github.io/angular-nvd3/

(function() {
  use strict';

    angular.module('app.userAttendances', [])
            .service('AttendancesService', AttendancesService);

    function AttendancesService() {
        var service = {
            getUserAttendances: getUserAttendances
        };
        var data = [
            {
                user:
                  {name: 'Laura', lastName: 'Guzman'},
                attendances: [
                    {x: Date.parse('May 01, 2015'), y: 1.5},
                    {x: Date.parse('May 02, 2015'), y: 3.6},
                    {x: Date.parse('May 03, 2015'), y: 4},
                    {x: Date.parse('May 04, 2015'), y: 7},
                    {x: Date.parse('May 05, 2015'), y: 6},
                    {x: Date.parse('May 06, 2015'), y: 2.5},
                    {x: Date.parse('May 07, 2015'), y: 5.6},
                    {x: Date.parse('May 08, 2015'), y: 0.5}
                ]
              
            },
            {
                user:
                  {name: 'Juan', lastName: 'Perez'},
                attendances: [
                    {x: Date.parse('May 01, 2015'), y: 0.5},
                    {x: Date.parse('May 02, 2015'), y: 6},
                    {x: Date.parse('May 03, 2015'), y: 3.2},
                    {x: Date.parse('May 04, 2015'), y: 5},
                    {x: Date.parse('May 05, 2015'), y: 4},
                    {x: Date.parse('May 06, 2015'), y: 2.3},
                    {x: Date.parse('May 07, 2015'), y: 7},
                    {x: Date.parse('May 08, 2015'), y: 8.5}
                ]
              
            }
        ];
        function getUserAttendances() {
            return data;
        }
        return service;
    }
})();

(function () {
  'use strict';
  angular.module('app.accumulatedAttendanceChart').
    controller('AttendanceChartController', AttendanceChartController);
    
    AttendanceChartController.inject = ['$scope', 'AttendancesService']
    function AttendanceChartController($scope, AttendancesService) {
    $scope.options = {
            chart: {
                type: 'lineChart',
                height: 450,
                margin : {
                    top: 20,
                    right: 20,
                    bottom: 40,
                    left: 55
                },
                x: function(d){ return d.x; },
                y: function(d){ return d.y; },
                useInteractiveGuideline: true,
                
                xAxis: {
                    axisLabel: 'Date(MM/dd/yyyy)'
                },
                yAxis: {
                    axisLabel: 'Hours',
                    tickFormat: function(d){
                        return d3.format('%m/%d/%Y')(new Date(d));
                    },
                    axisLabelDistance: -10
                },
                callback: function(chart){
                    console.log("!!! lineChart callback !!!");
                }
            },
            title: {
                enable: true,
                text: 'Attendance Chart'
            },
            
        };

        $scope.data = sinAndCos();

        function sinAndCos() {
            var attendanceData = AttendancesService.getUserAttendances();
            return [
                {
                    values: attendanceData[0],      //values - represents the array of {x,y} data points
                    key: 'Sine Wave', //key  - the name of the series.
                    color: '#ff7f0e',  //color - optional: choose your own line color.
                    strokeWidth: 2,
                    classed: 'dashed'
                }
            ];
        }
}
})();

<div ng-controller="AttendanceChartController">
  <nvd3 options="options" data="data" class="with-3d-shadow with-transitions"></nvd3>
</div>