/
silo_demo1.html
129 lines (116 loc) · 4.87 KB
/
silo_demo1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {border: 2px solid gray; border-collapse: collapse;}
th, td {width: 100px;}
</style>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
var url = "https://www.longpaddock.qld.gov.au/cgi-bin/silo/PatchedPointDataset.php?format=standard&station=40221&start=20170201&finish=20170228&username=DECO3800&password=UQ3800"
var txt = "silo_feb.txt"
drawTable();
drawChart();
function removeSpace(entry) {
return entry != "";
}
function drawTable() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var siloText = this.responseText;
if(siloText.search("(ddmmyyyy)")) {
var siloData = siloText.slice(siloText.search("(ddmmyyyy)")+10);
}
var siloDump = siloData.split(/[\r\s]/);
var siloArray = siloDump.filter(removeSpace)
for(var j = 0; j<=10; j++) {
var newRow = document.createElement("TR");
var rowId = document.createAttribute("id");
rowId.value = "currentrow";
newRow.setAttributeNode(rowId);
document.getElementById("silotable").appendChild(newRow);
for(var i = 0; i<=16; i++) {
var newCell = document.createElement("TD");
var newValue = document.createTextNode(siloArray.shift());
newCell.appendChild(newValue);
document.getElementById("silotable").appendChild(newCell);
}
document.getElementById("currentrow").removeAttribute("id");
}
}
};
xhttp.open('GET', txt, true);
xhttp.send();
}
function drawChart() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var siloText = this.responseText;
if(siloText.search("(ddmmyyyy)")) {
var siloData = siloText.slice(siloText.search("(ddmmyyyy)")+10);
}
var siloDump = siloData.split(/[\r\s]/);
var siloArray = siloDump.filter(removeSpace);
var siloTemps = [['Date', 'Max Temp', 'Min Temp']];
var datePos = 16;
var minTPos = 4;
var maxTPos = 2;
for(var k=0; k<=20; k++) {
var newEntry = [];
newEntry.push(siloArray[datePos]);
newEntry.push(parseFloat(siloArray[minTPos]));
newEntry.push(parseFloat(siloArray[maxTPos]));
siloTemps.push(newEntry);
datePos += 17;
minTPos += 17;
maxTPos += 17;
}
var data = google.visualization.arrayToDataTable(siloTemps);
var options = {
title: 'Dutton Park - February 2017',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
};
xhttp.open('GET', txt, true);
xhttp.send();
}
</script>
</head>
<body>
<h1>Demo Test Page for SILO Database</h1>
<p>Retrieving data at Dutton Park (40221) for February 2017</p>
<table>
<thead>
<tr>
<th>Date</th>
<th>Day</th>
<th>T.Max</th>
<th>Smx</th>
<th>T.Min</th>
<th>Smn</th>
<th>Rain</th>
<th>Srn</th>
<th>Evap</th>
<th>Sev</th>
<th>Radn</th>
<th>Ssl</th>
<th>VP</th>
<th>Svp</th>
<th>RHmaxT</th>
<th>RHminT</th>
<th>Date2</th>
</tr>
</thead>
<tbody id="silotable">
</tbody>
</table>
<div id="curve_chart" style="height: 500px"></div>
</body>
</html>