Multichart krispo showing curved lines instead of straight lines

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.