RestAngular - Angular - NVD3 - CumulativeLineChart - plotting y axis and x axis

Question

I am newbie to Restangular and using angular-nvd3 charts api.

I have RestService which is returning Json response in below format.

3 Different line will be plotted on single graphs.

Key - Name like A, B , C Values - milliseconds, order/sec

x-axis - Date (Converted from milliseconds)

y axis - orders/sec

JSON

[
    {
        "key": "A",
        "values": [
            [
                1447673334646,
                17
            ],                           
            [
                1447673634646,
                22
            ],
            [
                1447673694646,
                19
            ],
            [
                1447673754646,
                7
            ],
            [
                1447673814646,
                7
            ],
            [
                1447673874646,
                15
            ],               
        ]
    },
    {
        "key": "B",
        "values": [
            [
                1447673334646,
                14
            ],               
            [
                1447673694646,
                17
            ],               
            [
                1447674054646,
                23
            ]
        ]
    },
    {
        "key": "C",
        "values": [
           [
                1447673694646,
                5
            ],
            [
                1447673754646,
                12
            ],
            [
                1447673814646,
                12
            ],                
            [
                1447673994646,
                7
            ],
            [
                1447674054646,
                18
            ]
        ]
    }
]

Data structure used - List<String , List<List<Long>>>

I am plotting graph using below

Script Code

<script>

        angular.module('nvd3TestApp', ['nvd3','restangular']).config(function(RestangularProvider){
            RestangularProvider.setBaseUrl('myUrl')}).controller('MainCtrl', function($scope,Restangular) {

      var refreshInterval = 10 * 1000;
      var allCmnts = Restangular.all("getData");

     $scope.fetchData2 = function() {
      allCmnts.getList().then(function(response){
            $scope.data = response;
              });


           $scope.options = {
            chart: {
                type: 'cumulativeLineChart',
                height: 450,
                margin : {
                    top: 20,
                    right: 20,
                    bottom: 60,
                    left: 65
                },
                x: function(d){ return d[0]; },
                y: function(d){ return d[1]; },
                color: d3.scale.category10().range(),
                useInteractiveGuideline: true,


                xAxis: {
                    axisLabel: 'Time In Minutes',
                    tickFormat: function(d) {
                        return d3.time.format('%H:%M')(new Date(d))
                    },
                    showMaxMin: false,

                },

                yAxis: {
                    axisLabel: 'ORDERS',
                    tickFormat: function(d){
                        return d;
                    },

                }
            }
        };
    }

            setInterval(function() {
                $scope.$apply(function() {
                $scope.fetchData2();
                $scope.api.refresh();
                })
            }, refreshInterval);

            $scope.fetchData2();
        });
    </script>

HTML

<div ng-app ="nvd3TestApp">
    <div ng-controller="MainCtrl">
     <nvd3 options="options" data="data"></nvd3>
</div>
</div>

Issues i am facing

1.) The above code runs fine, no script errors, nothing. graph is getting displayed.

2.) Y-axis is not plotting properly, values are coming in decimals, though response as shown return Long values.

3.) Negative graph is getting displayed for y-axis

4.) x-axis is not plotting in continuous way, meaning 17:13 -> 17:16....., how to show 17:14, 17:15 etc..

Answer 1

After going through multiple blogs, there are some existing issues with cumulativeLineChart, so i switched to lineChart, no need to change anything in json structure.

Below Somme more changes i did for plotting x-axis and y-axis.

The issue for negative y-axis plotting was gone using linechart.

xAxis: {
                        axisLabel: 'Time In Minutes',
                        tickFormat: function(d) {
                            return d3.time.format('%H:%M')(new Date(d))
                        },
                        orient: 'bottom',
                        tickPadding: 0,
                        rotateLabels: -45,
                        axisLabelDistance: 1,
                        ticks: xlength,
                    },

                    yAxis: {
                        axisLabel: 'data',
                        tickFormat: function(d){
                            return d;
                        },
                        orient: 'left',                 
                    }
                }