I am creating an web app with a table of x,y & α,β for the user to input and graphing them on google line chart as 2 different series. However, the google chart does not follow the sequence of the co-ordinates and jumps to different sequence. The points are there the line follows an unusual probably the shortest distance between the coordinates as shown in the following picture instead of square is like N.
example graph of square
the code is the following:
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawCurveTypes);
const input = document.querySelector('table');
input.addEventListener('input', updateValue);
function updateValue(e) { drawCurveTypes() }
function drawCurveTypes() {
var data = new google.visualization.DataTable();
var data2 = new google.visualization.DataTable();
var x = [];
var y = [];
var a = [];
var b = [];
var s = [];
var ss = [];
for (var i = 0; i < 20; i++) {
var u = i+1
x[i] = +document.getElementById("x"+u).value;
y[i] = +document.getElementById("y"+u).value;
if (x[i]!==0 || y[i]!==0) {
var temp=[]
temp.push( +document.getElementById("x"+u).value);
temp.push( +document.getElementById("y"+u).value);
s.push(temp);
}
}
for (var i = 0; i < 20; i++) {
var u = i+1
a[i] = +document.getElementById("a"+u).value;
b[i] = +document.getElementById("b"+u).value;
if (a[i]!==0 || b[i]!==0) {
var temp=[]
temp.push( +document.getElementById("a"+u).value);
temp.push( +document.getElementById("b"+u).value);
ss.push(temp);
}
}
data.addColumn('number', 'X');
data.addColumn('number', 'Geometry');
data.addRows(s);
data2.addColumn('number', 'X');
data2.addColumn('number', 'Columns');
data2.addRows(ss);
var joinedData = google.visualization.data.join(data, data2, 'full', [[0, 0]], [1], [1]);
var options = {
backgroundColor: '#35424a',
legendTextColor:'#ffffff',
chartArea:{left:60,width:'72%',height:'88%'},
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(joinedData, options);
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<table class="table" style="background: #35424a; padding:10px; float:left;">
<tr>
<th>x</th>
<th>y</th>
<th>α</th>
<th>β</th>
<th>B</th>
<th>H</th>
</tr>
<tr>
<th><input type="number" id="x1" /></th>
<th><input type="number" id="y1" /></th>
<th><input type="number" id="a1" /></th>
<th><input type="number" id="b1" /></th>
<th><input type="number" id="w1" /></th>
<th><input type="number" id="h1" /></th>
</tr>
<tr>
<th><input type="number" id="x2" /></th>
<th><input type="number" id="y2" /></th>
<th><input type="number" id="a2" /></th>
<th><input type="number" id="b2" /></th>
<th><input type="number" id="w2" /></th>
<th><input type="number" id="h2" /></th>
</tr>
<tr>
<th><input type="number" id="x3" /></th>
<th><input type="number" id="y3" /></th>
<th><input type="number" id="a3" /></th>
<th><input type="number" id="b3" /></th>
<th><input type="number" id="w3" /></th>
<th><input type="number" id="h3" /></th>
</tr>
<tr>
<th><input type="number" id="x4" /></th>
<th><input type="number" id="y4" /></th>
<th><input type="number" id="a4" /></th>
<th><input type="number" id="b4" /></th>
<th><input type="number" id="w4" /></th>
<th><input type="number" id="h4" /></th>
</tr>
<tr>
<th><input type="number" id="x5" /></th>
<th><input type="number" id="y5" /></th>
<th><input type="number" id="a5" /></th>
<th><input type="number" id="b5" /></th>
<th><input type="number" id="w5" /></th>
<th><input type="number" id="h5" /></th>
</tr>
</table>
<div id="chart_div" style="float:right ; height:600px; width:50%; padding-right:20px ; ">
</div>