nvd3, lineWithFocusChart for time series data is not displaying properly

Question

In my nvd3 lineWithFocusChart, y-axis data appearance is getting wired up. I have json data in correct format but still y-axis data is not appearing properly. I have put the reference plunker at http://plnkr.co/edit/QwMbTL4co0wMVKaQurxq?p=preview.

I have even used tick format correctly but still the appearance is not proper. How to make this chart display the y-axis data correctly?

 tickFormat: function(d){
                        return  d3.time.format('%d/%m/%y')(
                                                new Date(d))
                    }

I have used below sorting function. But still it is not working.

angular.forEach($scope.data, function(series, index) {
                            series.values.sort(function(a, b) {
                                return a[0] - b[0];
                            });
                        });

Answer 1

The following function too fixes the above mentioned chart display problem.

angular.forEach($scope.data, function(series, index) {
                            series.values.sort(function(a, b) {
                                return a.x - b.x;
                            });
                        });

Answer 2

I am not sure how Angular works. From a NVD3 point of view it needs to look like the following, replace y with your sorted timestamps. Try to pass a sorted data structure into the chart.

Try this sample dataset structure :

[
  {
    "key": "Stream0",
    "values": [
      {
        "x": 0,
        "y": 1.7295799731844639,
        "series": 0
      },
      {
        "x": 1,
        "y": 1.4786744584068263,
        "series": 0
      },
      {
        "x": 2,
        "y": 1.2933604184307024,
        "series": 0
      },
      {
        "x": 3,
        "y": 1.0545169052395873,
        "series": 0
      },
      {
        "x": 4,
        "y": 0.9355866365151941,
        "series": 0
      },
      {
        "x": 5,
        "y": 0.7635212444141124,
        "series": 0
      },
      {
        "x": 6,
        "y": 0.565136089920293,
        "series": 0
      },
      {
        "x": 7,
        "y": 0.53905008125296,
        "series": 0
      },
      {
        "x": 8,
        "y": 0.37174374881238753,
        "series": 0
      },
      {
        "x": 9,
        "y": 0.34531043658548377,
        "series": 0
      },
      {
        "x": 10,
        "y": 0.328211247181182,
        "series": 0
      }
    ]
  },
  {
    "key": "Stream1",
    "values": [
      {
        "x": 0,
        "y": 0.13249877834306772,
        "series": 1
      },
      {
        "x": 1,
        "y": 0.18966416588140741,
        "series": 1
      },
      {
        "x": 2,
        "y": 0.15503209036373955,
        "series": 1
      },
      {
        "x": 3,
        "y": 0.16519284756400573,
        "series": 1
      },
      {
        "x": 4,
        "y": 0.19680925364034846,
        "series": 1
      },
      {
        "x": 5,
        "y": 0.15990817677876387,
        "series": 1
      },
      {
        "x": 6,
        "y": 0.19427819689638404,
        "series": 1
      },
      {
        "x": 7,
        "y": 0.14638497347498736,
        "series": 1
      },
      {
        "x": 8,
        "y": 0.252980017823181,
        "series": 1
      },
      {
        "x": 9,
        "y": 0.38707426684750496,
        "series": 1
      },
      {
        "x": 10,
        "y": 0.5779972814312548,
        "series": 1
      }
    ]
  },
  {
    "key": "Stream2",
    "values": [
      {
        "x": 0,
        "y": 0.6236632729965124,
        "series": 2
      },
      {
        "x": 1,
        "y": 0.7353256169924149,
        "series": 2
      },
      {
        "x": 2,
        "y": 0.9528230226672629,
        "series": 2
      },
      {
        "x": 3,
        "y": 1.1790902509337027,
        "series": 2
      },
      {
        "x": 4,
        "y": 1.3709431861337658,
        "series": 2
      },
      {
        "x": 5,
        "y": 1.5484649771429377,
        "series": 2
      },
      {
        "x": 6,
        "y": 1.5936007146924656,
        "series": 2
      },
      {
        "x": 7,
        "y": 1.5565281321682678,
        "series": 2
      },
      {
        "x": 8,
        "y": 1.5324611327325905,
        "series": 2
      },
      {
        "x": 9,
        "y": 1.5132696097009746,
        "series": 2
      },
      {
        "x": 10,
        "y": 1.3909548760195327,
        "series": 2
      }
    ]
  }
]

Hope it helps