diff --git a/dev/dev.htm b/dev/dev.htm
index 440c0bd..d44c198 100644
--- a/dev/dev.htm
+++ b/dev/dev.htm
@@ -14,9 +14,9 @@ function initCharts() {
chart = c3.generate({
bindto: '#humidity-temp',
data: {
- x: 'x',
+ x: 'time',
columns: [
- ['x', 1, 2, 3, 4],
+ ['time', 1, 2, 3, 4],
['temp', 24, 24.5, 24.3, 24.6],
['humidity', 83.1, 99.5, 74.3, 84.6],
],
@@ -37,9 +37,9 @@ function initCharts() {
chart2 = c3.generate({
bindto: '#volts',
data: {
- x: 'x',
+ x: 'time',
columns: [
- ['x', 1, 2, 3, 4],
+ ['time', 1, 2, 3, 4],
['voltage', 24, 24.5, 24.3, 24.6],
],
axes: {
@@ -51,15 +51,117 @@ function initCharts() {
}
})
}
+
+var cur_time_millis = 0
+var max_interval_millis = 5*60*1000
+
+var time = []
+var temp = []
+var humd = []
+var volts = []
+
+function status(msg) {
+ document.getElementById('status').textContent = msg
+}
+
+async function updateCharts() {
+ status("loading data...")
+ const latest = await fetch("/api/latest")
+ const last_time_millis = await latest.json()
+ if (last_time_millis > cur_time_millis) {
+ // we need to collect more data to catch up
+ // time is in milliseconds so we divide by 1000
+ var diff = (last_time_millis - cur_time_millis) / 1000
+ // worst case load only the last two weeks of data
+ diff = Math.min(diff, max_interval_millis/1000)
+ var path = "/api/last/weeks/"
+ var offset = diff
+ if (diff < 60*60) {
+ path = "/api/last/minutes/"
+ offset = Math.ceil(diff/60)
+ } else if (diff < 24*60*60) {
+ path = "/api/last/hours/"
+ offset = Math.ceil(diff/(60*60))
+ } else if (diff < 7*24*60*60) {
+ path = "/api/last/days/"
+ offset = Math.ceil(diff/(24*60*60))
+ } else {
+ path = "/api/last/weeks/"
+ offset = Math.ceil(diff/(7*24*60*60))
+ }
+ const new_data = await fetch(path + offset)
+ const new_data_json = await new_data.json()
+ // copy the data into the arrays
+ new_data_json.sort((a, b) => a.t - b.t)
+ new_data_json.forEach((v) => {
+ var last_time = time[time.length-1]
+ if (time.length == 0) {
+ last_time = 0
+ }
+ if (v.t > last_time) {
+ time.push(v.t)
+ temp.push(v.temp)
+ humd.push(v.hum)
+ volts.push(v.hv)
+ }
+ })
+ // truncate all the lists as necessary
+ // using the time array to determine the splicing points
+ cur_time_millis = time[time.length - 1]
+ const min_time = cur_time_millis - max_interval_millis
+
+ var slice_idx = 0
+ for (var i = 0; i < time.length; i++) {
+ if (time[i] >= min_time) {
+ slice_idx = i
+ break
+ }
+ }
+ console.log("slice idx ", slice_idx)
+
+ temp = temp.slice(slice_idx)
+ humd = humd.slice(slice_idx)
+ volts = volts.slice(slice_idx)
+ time = time.slice(slice_idx)
+
+ console.log(time)
+ console.log(temp)
+ console.log(humd)
+ console.log(volts)
+ chart.load({
+ columns: [
+ ["time"].concat(time),
+ ["temp"].concat(temp),
+ ["humidity"].concat(humd),
+ ]
+ })
+ chart2.load({
+ columns: [
+ ["time"].concat(time),
+ ["voltage"].concat(volts),
+ ]
+ })
+ status("charts updated")
+ }
+}
+
window.onload = () => {
initCharts()
- const xhr = new XmlHttpRequest()
+ updateCharts()
+
+ document.getElementById('update').addEventListener('click', (e) => {
+ updateCharts()
+ })
}
- Test!
+
+
+
+
+