I'm currently working with the NVD3 Line Chart, which can be found forked at this Plunker. Despite having 52 weeks of data, the x-axis on my line chart is only displaying the first 9 weeks' worth of data. Below is the code I am using:
var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', function($scope) {
$scope.options = {
chart: {
type: 'lineChart',
height: 450,
margin : {
top: 20,
right: 20,
bottom: 40,
left: 55
},
showControls: false,
showValues: true,
x: function (d) { return d.x; },
y: function (d) { return d.y; },
useInteractiveGuideline: true,
duration: function (d, i) { return parseInt(i + 1) * 600; },
xAxis: {
axisLabel: 'Week',
tickFormat: function (d) {
return d
},
reduceXTicks:false,
staggerLabels:false
},
yAxis: {
axisLabel: 'Loss',
tickFormat: function (d) {
return d3.format(",.2f")(d)
}
}
},
};
$scope.data = sinAndCos();
/*Random Data Generator */
function sinAndCos() {
var ApplicableLossHighData = [{"x":"1","y":"1.65"},{"x":"2","y":"1.6"},{"x":"3","y":"1.65"},{"x":"4","y":"1.55"},{"x":"5","y":"1.7"},{"x":"6","y":"1.45"},{"x":"7","y":"1.65"},{"x":"8","y":"1.65"},{"x":"9","y":"1.55"},{"x":"10","y":"1.6"},{"x":"11","y":"1.6"} ... {"x":"51","y":"1.45"},{"x":"52","y":"1.5"}]
return [{values: ApplicableLossHighData, key: 'High', color: '#ff7f0e',}]
}
});
Output:
https://i.sstatic.net/K6rJr.png
If you have any insights on why only a portion of the data is being displayed, please assist me in resolving this issue.