blob: cea6a202e91e98e5ae4a3b9e9dfec9406a09cb2b (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<!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');
};
s.onmessage = function(e) {
//alert('got ' + e.data);
var lines = e.data.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('');
};
};
</script>
</head>
<body>
<h3>Plot</h3>
<p>(Only tested in Chrome)</p>
<div id="holder" style="width:600px;height:300px"></div>
</body>
</html>
|
