I am creating a 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 a 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>the join method automatically sorts the resulting data table by the first column,
so you get whatever order that turns out to be...
instead, recommend using one data table for both series, with no join.
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Geometry');
data.addColumn('number', 'Columns');
to accomplish, when loading the data, just use null for which ever series is not being loaded.
and it is fine if you have multiple rows with the same x-axis value.
then you will get the original order from your input table.
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(drawCurveTypes);
function drawCurveTypes() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Geometry');
data.addColumn('number', 'Columns');
var x = [];
var y = [];
var a = [];
var b = [];
for (var i = 0; i < 5; 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) {
data.addRow([x[i], y[i], null]);
}
}
for (var i = 0; i < 5; 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) {
data.addRow([a[i], null, b[i]]);
}
}
var options = {
backgroundColor: '#35424a',
legendTextColor:'#ffffff',
chartArea: {
height: '100%',
width: '100%',
top: 40,
left: 40,
right: 40,
bottom: 40
},
height: '100%',
legend: {
position: 'top'
},
width: '100%'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, 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" value="1" /></th>
<th><input type="number" id="y1" value="1" /></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" value="-1" /></th>
<th><input type="number" id="y2" value="1" /></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" value="-1" /></th>
<th><input type="number" id="y3" value="-1" /></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" value="1" /></th>
<th><input type="number" id="y4" value="-1" /></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" value="1" /></th>
<th><input type="number" id="y5" value="1" /></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>