| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950 |
- <!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>
|