Created
February 7, 2021 21:52
-
-
Save dreness/51e557682d697c3cce4b832c8e1eebbc to your computer and use it in GitHub Desktop.
Realtime graph from WebSocket data
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#!/bin/zsh | |
D=$(date "+%Y-%m-%d") | |
#D=$(date "+%s") | |
ifstat -t -n -i en0 \ | |
| sed -l '1d;2d' \ | |
| while read -A IFSTAT | |
do | |
echo -n "{" | |
echo -n "\"Time\": \"${D} ${IFSTAT[1]}\", " | |
#echo -n "\"Time\": \"${IFSTAT[1]}\", " | |
echo -n "\"In\": ${IFSTAT[2]}, " | |
echo -n "\"Out\": ${IFSTAT[3]}" | |
echo "}" | |
done |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> | |
<script src="plotly.min.js"></script> | |
<link rel="stylesheet" type="text/css" href="styles.css"> | |
</head> | |
<body> | |
<div class="navbar"><span>Real-Time Chart with Plotly.js</span></div> | |
<div class="wrapper"> | |
<div id="chart"></div> | |
<script> | |
buttonInfo = [ | |
{"count": 30, "label": "30s", "step": "second", "stepmode": "todate"}, | |
{"count": 60, "label": "1m", "step": "second", "stepmode": "todate"}, | |
{"count": 300, "label": "5m", "step": "second", "stepmode": "todate"}, | |
{"count": 900, "label": "15m", "step": "second", "stepmode": "todate"}, | |
{"step": "all"} | |
]; | |
var xaxisLayout = { | |
title: "Time", | |
showgrid: false, | |
zeroline: false, | |
type: "date", | |
rangeselector: {buttons: buttonInfo}, | |
rangeslider: {}, | |
}; | |
var layout = { | |
title: "Bandwidth", | |
xaxis: xaxisLayout, | |
yaxis: { | |
title: "KB/s", | |
showline: false, | |
//autorange: true, | |
//fixedrange: false, | |
//min: 0 | |
}}; | |
var d = new Date(); | |
var wantXrange; | |
function datestring() { | |
d.getFullYear() + "-" + | |
(d.getMonth()+1) + "-" + | |
("0" + d.getDate()).slice(-2) + " " + | |
("0" + d.getHours()).slice(-2) + ":" + | |
("0" + d.getMinutes()).slice(-2) + ":" + | |
("0" + d.getSeconds()).slice(-2); | |
}; | |
startDate = datestring(); | |
//console.log(startDate); | |
var trace1 = { | |
x:[startDate], | |
y:[0], | |
type: "scatter", | |
name: "In", | |
mode: "lines", | |
line: {color: "#00FF00"} | |
}; | |
var trace2 = { | |
x:[startDate], | |
y:[0], | |
type: "scatter", | |
name: "Out", | |
mode: "lines", | |
line: {color: "#FF0000"} | |
}; | |
var data = [trace1, trace2]; | |
var mySocket = new WebSocket("ws://boop.local:80"); | |
mySocket.onopen = function (event) { | |
mySocket.send("womp"); | |
}; | |
mySocket.onmessage = function (event) { | |
var msg = JSON.parse(event.data); | |
updateGraph(msg); | |
}; | |
var config = {responsive: true} | |
Plotly.newPlot("chart", data, layout, config); | |
var cnt = 0; | |
function amax(arr) { | |
arr.reduce(function(a, b) { | |
return Math.max(a, b); | |
})}; | |
function amin(arr) { | |
arr.reduce(function(a, b) { | |
return Math.min(a, b); | |
})}; | |
myPlot = document.getElementById("chart") | |
buttons = [].slice.call(myPlot.getElementsByClassName("button")) | |
// keep track of the desired data window size | |
buttons.forEach(function (element, index){ | |
element.addEventListener("click", function(){ | |
if (d = buttonInfo[index]) { | |
//console.log("s", d.count); | |
wantXrange = d.count; | |
}; | |
}); | |
}); | |
function updateGraph(data) { | |
Plotly.extendTraces("chart", { | |
y:[[data.In], [data.Out]], | |
x:[[data.Time], [data.Time]] | |
}, [0, 1]); | |
if (wantXrange) { | |
xlen = trace1.x.length; | |
if (wantXrange < xlen) { | |
layout.xaxis.range = [trace1.x[xlen-wantXrange], trace1.x.slice(-1)[0]]; | |
var ymax = Math.max.apply( | |
null, | |
trace1.y.slice(-wantXrange).concat(trace2.y.slice(-wantXrange))); | |
//console.log("wantXrange <= xlen"); | |
//console.log("ymax: ", ymax); | |
// FIXME: This doesn't work...? | |
layout.yaxis.range = [0, ymax]; | |
Plotly.relayout("chart",layout); | |
} else { | |
layout.xaxis.range = [trace1.x[1], trace1.x.slice(-1)[0]]; | |
//ymax = amax(trace1.y, trace2.y); | |
//console.log("wantXrange > xlen"); | |
//layout.yaxis.range = [0, ymax]; | |
}; | |
}; | |
}; | |
</script> | |
</div> | |
</body> | |
</html> |
Author
dreness
commented
Feb 7, 2021
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment