heartbeatserver/views/plot.html

89 lines
2.0 KiB
HTML

<!DOCTYPE html>
<meta charset="utf-8" />
<title>WebSocket Test</title>
<style media="screen">
body{
font-family: Helvetica, sans-serif;
}
#graph{
height: calc(100vh - 5em);
}
</style>
<script src="https://cdn.plot.ly/plotly-1.5.0.min.js"></script>
<script language="javascript" type="text/javascript">
var wsUri = window.location.toString().replace('http','ws') + "ws";
console.log(wsUri)
</script>
<h2 id="title">current bpm: <span id='value'>...</span></h2>
<div id='downloads'>
Claim data
<span>Last hour <a href='/1h.csv'>as CSV</a>.</span>
<span>Last day <a href='/24h.csv'>as CSV</a>.</span>
<span>Last week <a href='/week.csv'>as CSV</a>.</span>
</div>
<div id="graph">
</div>
<script type="text/javascript">
var valueEl = document.getElementById('value');
Plotly.d3.csv("/1h.csv", function(err, rows){
console.log(rows);
function unpack(rows, key) {
return rows.map(function(row) { return row[key]; });
}
var trace1 = {
type: "scatter",
mode: "lines",
name: 'BPM',
x: unpack(rows, 'timestamp'),
y: unpack(rows, 'bpm'),
line: {color: '#17BECF'}
}
var data = [trace1];
var layout = {
title: 'Last hour',
};
Plotly.newPlot('graph', data, layout);
var wsUri = window.location.toString().replace('http','ws') + "ws";
var connectSocket = function() {
websocket = new WebSocket(wsUri);
websocket.onopen = function(evt) {
console.log("opened");
};
websocket.onclose = function(evt) {
console.log("closed", evt);
valueEl.innerHTML = '...';
setTimeout(connectSocket, 1000 * 10);
};
websocket.onmessage = function(evt) {
data = JSON.parse(evt.data);
var update = {
x: [[data['timestamp']]],
y: [[data['bpm']]]
}
console.log("update", update)
valueEl.innerHTML = data['bpm'];
Plotly.extendTraces('graph', update, [0])
};
websocket.onerror = function(evt) {
};
}
connectSocket();
});
</script>