gevent-websocket / examples / plot_graph.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>
	var iets = "";
	window.onload = function() {
		var data = {};
		try {
			var s = new WebSocket("ws://localhost:8000/data");
		}
		catch (e) {
			var s = new MozWebSocket("ws://localhost:8000/data");
		}
		s.onopen = function() {
			s.send('hi');
		};
		s.onmessage = function(e) {
			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>
	<div id="holder" style="width:600px;height:300px"></div>
	</body>
</html>
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.