From my last question Make 3D array in Javascript, I try another way to solve the problem. The main problem is getting values from the user, then choose the right 2D array, change the null value by the day value entered and show it on a graph.
The solution I work on is choose the right 2D array with switch:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type = "text/javascript" src = "prototype.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback();
function fixArray(){
var array_0 = [['Day', 'research', 'Weight'], ['32', 1898, null], ['33', 2432, null], ['34', 2533, null], ['35', 2267, null],
['36', 2649, null], ['37', 3018, null], ['38', 3264, null], ['39', 3460, null],
['40', 3561, null], ['41', 3706, null], ['42', 3576 , null], ['43', 3465, null]];
var array_1 = [['Day', 'research', 'Weight'], ['32', 1405, null], ['33', 1779, null], ['34', 2158, null], ['35', 2272, null],
['36', 2493, null], ['37', 2783, null], ['38', 2984, null], ['39', 3185, null],
['40', 3310, null], ['41', 3426, null], ['42', 3531, null], ['43', 3784, null]];
.
.
.
var array_10 = [['Day', 'research', 'Weight'], ['32', 2605 ,null], ['33', 3402, null], ['34', 3500, null], ['35', 3705, null],
['36', 3810, null], ['37', 3856, null], ['38', 3955, null], ['39', 4120, null],
['40', 4260, null], ['41', 4100, null], ['42', 4000 ,null], ['43', 3900, null]];
var fixed = new Array(12); // defining empty 2D array to the fixed array that will be show
for (var i = 0; i < fixed.length; i++)
fixed[i] = [];
var number = $('number').getValue();
var day = document.getElementById("day");
var weight = $('weight').getValue();
switch (number) {
case 0:
for(i=1; i<=12; i++){
if(array_0[i][0] == day)
array_0[i][2] = weight;
}
fixed = array_0;
break;
case 1:
for(i=1; i<=12; i++){
if(array_1[i][0] == day)
array_1[i][2] = weight;
}
fixed = array_1;
break;
.
.
.
case 10:
for(i=1; i<=12; i++){
if(array_10[i][0] == day)
array_10[i][2] = weight;
}
fixed = array_10;
break;
default:
alert("Not Enough Data");
break;
}
drawVisualization(fixed);
}
function drawVisualization(fixed) {
var data = google.visualization.arrayToDataTable(Array.from(fixed));
var options = {
title : 'Results',
vAxis: {title: 'Weight'},
hAxis: {title: 'Day'},
seriesType: 'line',
series: {1: {type: 'scatter'}}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
When I try to run the page, The browser always show me the default alert no matter what is the number value I entered.
My html code:
<form onsubmit="fixArray()">
<table>
<tr>
<td>Number:</td>
<td><input id="number" name="number" type="number"></td>
</tr>
<tr>
<td>Day:</td>
<td><input id="day" name="day" type="text"></td>
</tr>
<tr>
<td>Weight:</td>
<td><input id="weight" name="weight" type="text"></td>
</tr>
<tr>
<td>
<input name="Submit1" type="submit" value="Send" style="width: 80px; height: 35px"></td>
<td>
<input name="Reset1" type="reset" value="Reset" style="width: 80px; height: 35px"></td>
</tr>
</table>
</form>
<div id="chart_div" style="width: 900px; height: 500px"></div>
Another problem I have is when I try to use drawVisualization(array_0) at the code instead fix for check, the page show me the alert of the default case again. (and "All series on a given axis must be of the same data type×" error shown at the chart div).
What am I doing wrong?
