51 lines
1.5 KiB
HTML
51 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<!-- idea and code swiped from
|
|
http://assorted.svn.sourceforge.net/viewvc/assorted/real-time-plotter/trunk/src/rtp.html?view=markup -->
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
|
|
<script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
|
|
<script>
|
|
window.onload = function() {
|
|
var data = {};
|
|
var s = new WebSocket("ws://127.0.0.1:7000/data");
|
|
s.onopen = function() {
|
|
//alert('open');
|
|
s.send('hi');
|
|
};
|
|
var on_message_read = function(e) {
|
|
var lines = e.target.result.split('\n');
|
|
for (var i = 0; i < lines.length - 1; i++) {
|
|
var parts = lines[i].split(' ');
|
|
var d = parts[0], x = parseFloat(parts[1]), y = parseFloat(parts[2]);
|
|
if (!(d in data)) data[d] = [];
|
|
data[d].push([x,y]);
|
|
}
|
|
var plots = [];
|
|
for (var d in data) plots.push( { data: data[d].slice(data[d].length - 200) } );
|
|
$.plot( $("#holder"), plots,
|
|
{
|
|
series: {
|
|
lines: { show: true, fill: true },
|
|
},
|
|
yaxis: { min: 0 },
|
|
} );
|
|
|
|
s.send('');
|
|
};
|
|
s.onmessage = function(e) {
|
|
//alert('got ' + e.data);
|
|
var reader = new FileReader();
|
|
reader.addEventListener("loadend", on_message_read);
|
|
reader.readAsText(e.data);
|
|
};
|
|
};
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<h3>Plot</h3>
|
|
<p>(Only tested in Chrome)</p>
|
|
<div id="holder" style="width:600px;height:300px"></div>
|
|
</body>
|
|
</html>
|