nvd3 AngularJS date format issue - non-epoch - angularjs

Question

I am using nvd3 chart in AngularJS. I am getting the data like series of [{"09/01/2015", 5},...]. i.e. [{mm/dd/yyyy, decimal}]. After checking NVD3 tutorial looks like date needs to be in epoch format, which is not possible for my case. I dont see any reference for that. How can make a line chart with Y axis some decimal values and X axis month-year or complete date without converting to epoch format.
Any reference or tutorial also would be a great help. Thanks in advance...
My Code:
var appCntrl = angular.module("AppCntrl",['nvd3']);
appCntrl.controller("QPBDController", function($scope){
$scope.score = {
"data":[7.97,8.93,6.53,4.87,4.98,4.56],
"term":["09/01/2015","10/01/2015","11/01/2015","12/01/2015","01/01/2016","02/01/2016"]
};
$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,
dispatch: {
stateChange: function(e){ console.log("stateChange"); },
changeState: function(e){ console.log("changeState"); },
tooltipShow: function(e){ console.log("tooltipShow"); },
tooltipHide: function(e){ console.log("tooltipHide"); }
},
xAxis: {
tickFormat: function(d) {return d3.time.format("%b %d, %Y")(d);}
},
yAxis: {
axisLabel: 'Voltage (v)',
tickFormat: function(d){
return d3.format('.02f')(d);
},
axisLabelDistance: -10
},
callback: function(chart){
console.log("!!! lineChart callback !!!");
}
},
title: {
enable: true,
text: 'Title for Line Chart'
},
subtitle: {
enable: true,
text: 'Subtitle for simple line chart.',
css: {
'text-align': 'center',
'margin': '10px 13px 0px 7px'
}
},
caption: {
enable: true,
html: '<b>Figure 1.</b> .',
css: {
'text-align': 'justify',
'margin': '10px 13px 0px 7px'
}
}
};
$scope.data = sinAndCos();
var str = ["s"];
/*Random Data Generator */
function sinAndCos() {
var sin = [],sin2 = [],
cos = [];
//Data is represented as an array of {x,y} pairs.
for (var i = 0; i < $scope.score.term.length; i++) {
sin.push({x: $scope.score.term[i], y: $scope.score.data[i]});
sin2.push({x: $scope.score.term[i], y: $scope.score.data[i]});
cos.push({x: $scope.score.term[i], y: $scope.score.data[i]});
}
console.log(sin);
//Line chart data should be sent as an array of series objects.
return [
{
values: sin, //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'
},
{
values: cos,
key: 'Cosine Wave',
color: '#2ca02c'
},
{
values: sin2,
key: 'Another sine wave',
color: '#7777ff',
area: true //area - set to true if you want this line to turn into a filled area chart.
}
];
};
});
index.html:
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="css/app.css" rel="stylesheet">
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="node_modules/d3/d3.min.js"></script>
<script src="node_modules/nvd3/build/nv.d3.min.js"></script>
<script src="node_modules/angular-nvd3/dist/angular-nvd3.min.js"></script>
<link href="node_modules/nvd3/build/nv.d3.min.css" rel="stylesheet">
<script src="bizkpi.js"></script>
<script src="js/controllers.js"></script>
<nvd3 options="options" data="data"></nvd3>
The above code shows an error in console like below and nothing comes up in GUI
TypeError: n.getMonth is not a function
at Yn.A.b (d3.min.js:1)
at t (d3.min.js:1)
at SVGTextElement.$scope.options.chart.xAxis.tickFormat (controllers.js:29)
at SVGTextElement.arguments.length.each.function.n.textContent (d3.min.js:3)
at d3.min.js:3
at Y (d3.min.js:1)
at Array.Co.each (d3.min.js:3)
at Array.Co.text (d3.min.js:3)
at SVGGElement.<anonymous> (d3.min.js:5)

Answer 1

you will have to format the date as follows:
vm.chart.options.chart.xAxis.tickFormat = function(d) {return d3.time.format("%b %d, %Y")(d);};
in your options.chart you should have :
lines: {
xScale: d3.time.scale(),
},
I think you should set the ticks and tickValues as well for example..
vm.chart.options.chart.xAxis.ticks = d3.time.monday;
vm.chart.options.chart.xAxis.tickValues = function(d) {return d3.time.monday.range(from, to, 2);};
};