google line chart is drawing extra lines

1
votes

I have a line chart to draw multi values but it's drawing extra line with angles, I have checked my data there are no duplicates. this is how it looks like :

enter image description here

my chart options are simple:

var options = {
    "legend": { "position": "top"},
    "hAxis": {
        title: "Time of Day"
    },
    vAxis: {
        "textPosition": "out",
        textStyle: {color: '#328332'},
        title: "Voltage (V)",
        titleTextStyle: {color: '#328332'},
    }
}


var chartId = 'records-chart';
var dt = new google.visualization.DataTable();
dt.addColumn('datetime', 'Date');
dt.addColumn('number', 'Voltage');
var data = [];
for (var i = 0; i < $scope.data.length; i++) {
        data[i] = [
            $scope.data[i].time,
            $scope.data[i].voltage,
        ];
}
dt.addRows(data);

var chart = new google.visualization.LineChart(document.getElementById(chartId));
chart.draw(rtRecordsDataTable, options);

why is the chart connecting data in this weird behaviour ? what can I do to avoid it?

1
javascriptchartsgoogle-visualizationlinechart

1 Answers

2
votes

looks like you need to sort the data by the first column (date),
before drawing the chart... 

dt.addRows(data);

dt.sort([{column: 0}]);

var chart = new google.visualization.LineChart(document.getElementById(chartId));
chart.draw(rtRecordsDataTable, options);