Multichart krispo showing curved lines instead of straight lines - nvd3.js

Question

In my angular application I have used Krispo Multichart graph. Where I am getting some weird graph points.
See below screen shot:
UPDATE
Screen shot 1 :
Screen shot 2:
Screen shot 3:
In above screen shots, the data are coming in every minutes (i;e expected). Data seems correct.
Here is my Options:
$scope.options_line = {
chart: {
type: 'multiChart',
yDomain1: [0, 250],
yDomain2: [0, 0],
height: 260,
width: 550,
margin: {
top: 10,
right: 50,
bottom: 50,
left: 60
},
x: function (d) {
return d.x;
},
y: function (d) {
return d.y;
},
text: function (d) {
return d.x;
},
color: d3.scale.category10().range(),
showValues: true,
valueFormat: function (d) {
return d3.format('f')(d);
},
duration: 500,
xAxis: {
axisLabel: 'Time',
tickFormat: function (d) {
return d3.time.format('%H:%M')(new Date(d));
}
},
yAxis1: {
axisLabelDistance: 0,
axisLabel: 'Voltage [ V ]',
tickFormat: function (d) {
return d3.format('f')(d);
}
},
yAxis2: {
axisLabelDistance: 0,
axisLabel: 'Current [ A ]',
tickFormat: function (d) {
return d3.format('f')(d);
},
width: 50,
},
interactive: true,
tooltip: {
contentGenerator: function (e) {
//return html content
//console.log(e);
//console.log($scope.tooltip_format);
var data = e;
console.log(data.point.y);
var series = e.series[0];
if($scope.set_offset_val) { $scope.xtime = data.point.x - $scope.set_offset_val} else {
$scope.xtime = data.point.x;
}
return '<h3>' + series.key + '</h3>' +
'<p>' + parseFloat(data.point.y).toFixed(2) + ' at ' + $filter('date')($scope.xtime, $scope.tooltip_format) + '</p>'
}
}
}
};
And JSON data:
[{
"yAxis": 1,
"values": [{
"x": "1487939640000",
"y": "150"
}, {
"x": "1487939700000",
"y": "150"
}, {
"x": "1487939760000",
"y": "150"
}, {
"x": "1487939820000",
"y": "151"
}, {
"x": "1487939880000",
"y": "151"
}, {
"x": "1487939940000",
"y": "151"
}, {
"x": "1487940000000",
"y": "151"
}, {
"x": "1487940060000",
"y": "151"
}, {
"x": "1487940660000",
"y": "168"
}, {
"x": "1487940720000",
"y": "169"
}, {
"x": "1487940840000",
"y": "165"
}, {
"x": "1487942100000",
"y": "165"
}, {
"x": "1487942160000",
"y": "165"
}, {
"x": "1487942220000",
"y": "154"
}, {
"x": "1487942280000",
"y": "165"
}, {
"x": "1487942340000",
"y": "165"
}, {
"x": "1487942400000",
"y": "165"
}, {
"x": "1487942460000",
"y": "165"
}, {
"x": "1487942520000",
"y": "165"
}, {
"x": "1487942580000",
"y": "165"
}, {
"x": "1487942640000",
"y": "165"
}, {
"x": "1487942700000",
"y": "165"
}],
"type": "line",
"key": "PVVoltage"
}, {
"yAxis": 2,
"values": [{
"x": "1487939640000",
"y": "4"
}, {
"x": "1487939700000",
"y": "4"
}, {
"x": "1487939760000",
"y": "2.3"
}, {
"x": "1487939820000",
"y": "2.1"
}, {
"x": "1487939880000",
"y": "1.6"
}, {
"x": "1487939940000",
"y": "1"
}, {
"x": "1487940000000",
"y": "1.5"
}, {
"x": "1487940060000",
"y": "0.1"
}, {
"x": "1487940660000",
"y": "3.5"
}, {
"x": "1487940720000",
"y": "0.1"
}, {
"x": "1487940840000",
"y": "0.5"
}, {
"x": "1487942100000",
"y": "2"
}, {
"x": "1487942160000",
"y": "0.2"
}, {
"x": "1487942220000",
"y": "3.2"
}, {
"x": "1487942280000",
"y": "0"
}, {
"x": "1487942340000",
"y": "0"
}, {
"x": "1487942400000",
"y": "0"
}, {
"x": "1487942460000",
"y": "0"
}, {
"x": "1487942520000",
"y": "0.1"
}, {
"x": "1487942580000",
"y": "0.1"
}, {
"x": "1487942640000",
"y": "0"
}, {
"x": "1487942700000",
"y": "0"
}],
"type": "line",
"key": "PVCurrent"
}]
Expected graph should not have the curve in it as this is a line graph. I my case point has went right and again left and then up.
Anyone have any idea why this is happening? and how can I fix this.