Implement updatable charts
This commit is contained in:
parent
00868284bd
commit
ce21b6fa85
114
dev/dev.htm
114
dev/dev.htm
|
|
@ -14,9 +14,9 @@ function initCharts() {
|
||||||
chart = c3.generate({
|
chart = c3.generate({
|
||||||
bindto: '#humidity-temp',
|
bindto: '#humidity-temp',
|
||||||
data: {
|
data: {
|
||||||
x: 'x',
|
x: 'time',
|
||||||
columns: [
|
columns: [
|
||||||
['x', 1, 2, 3, 4],
|
['time', 1, 2, 3, 4],
|
||||||
['temp', 24, 24.5, 24.3, 24.6],
|
['temp', 24, 24.5, 24.3, 24.6],
|
||||||
['humidity', 83.1, 99.5, 74.3, 84.6],
|
['humidity', 83.1, 99.5, 74.3, 84.6],
|
||||||
],
|
],
|
||||||
|
|
@ -37,9 +37,9 @@ function initCharts() {
|
||||||
chart2 = c3.generate({
|
chart2 = c3.generate({
|
||||||
bindto: '#volts',
|
bindto: '#volts',
|
||||||
data: {
|
data: {
|
||||||
x: 'x',
|
x: 'time',
|
||||||
columns: [
|
columns: [
|
||||||
['x', 1, 2, 3, 4],
|
['time', 1, 2, 3, 4],
|
||||||
['voltage', 24, 24.5, 24.3, 24.6],
|
['voltage', 24, 24.5, 24.3, 24.6],
|
||||||
],
|
],
|
||||||
axes: {
|
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 = () => {
|
window.onload = () => {
|
||||||
initCharts()
|
initCharts()
|
||||||
const xhr = new XmlHttpRequest()
|
updateCharts()
|
||||||
|
|
||||||
|
document.getElementById('update').addEventListener('click', (e) => {
|
||||||
|
updateCharts()
|
||||||
|
})
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="humidity-temp"></div>
|
<div id="humidity-temp"></div>
|
||||||
<div id="volts"></div>
|
<div id="volts"></div>
|
||||||
<p>Test!</p>
|
<div>
|
||||||
|
<input type=button id=update value="Update"></input>
|
||||||
|
<span id=status></span>
|
||||||
|
</div>
|
||||||
|
<div id=device_status></div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue