Skip to content

Instantly share code, notes, and snippets.

@fryguy1013
Created April 30, 2012 22:32
Show Gist options
  • Save fryguy1013/2563274 to your computer and use it in GitHub Desktop.
Save fryguy1013/2563274 to your computer and use it in GitHub Desktop.
Realtime simplegraph
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://jquery-json.googlecode.com/files/jquery.json-2.2.min.js"></script>
<script type="text/javascript" src="http://jquery-websocket.googlecode.com/files/jquery.websocket-0.0.1.js"></script>
<script type="text/javascript">
(function($){
$.extend({
websocketSettings: {
open: function(){},
close: function(){},
message: function(e){},
options: {},
events: {}
},
websocket: function(url, s) {
var ws = WebSocket ? new WebSocket( url ) : {
send: function(m){ return false },
close: function(){}
};
ws._settings = $.extend({}, $.websocketSettings, s);
ws._send = ws.send;
ws.onopen = ws._settings.open;
ws.onclose = ws._settings.close;
ws.onmessage = function(e)
{
ws._settings.message(e);
var m = $.evalJSON(e.data);
var h = ws._settings.events[m.type];
if (h) h.call(this, m);
};
ws.send = function(type, data) {
var m = {type: type};
m = $.extend(true, m, $.extend(true, {}, $.websocketSettings.options, m));
if (data) m['data'] = data;
return this._send($.toJSON(m));
}
$(window).unload(function(){ ws.close(); ws = null });
return ws;
}
});
})(jQuery);
var ctx;
function initCanvas ()
{
// Try to access the canvas element and throw an error if it isn't available
var cv = $("#graph").get(0);
if (!cv)
return;
// Try to get a 2D context for the canvas and throw an error if unable to
ctx = cv.getContext('2d');
if (!ctx)
return;
}
var xOffset = 30;
var MAX_DATA_POINTS = 81;
var CHART_WIDTH = 600;
var CHART_HEIGHT = 300;
var widthPerSample = CHART_WIDTH / (MAX_DATA_POINTS - 1);
var chartData = [];
function updateChart()
{
ctx.clearRect(0, 0,CHART_WIDTH, CHART_HEIGHT);
// draw border
ctx.lineWidth = 2;
ctx.strokeStyle = "rgb(0,0,0)";
ctx.strokeRect(0, 0, CHART_WIDTH, CHART_HEIGHT);
// draw the hash lines
ctx.lineWidth = .5;
for (var i=10; i<100; i+=10)
{
ctx.strokeStyle = "rgb(192, 192, 192)";
var yPos = CHART_HEIGHT - 3*i;
ctx.beginPath();
ctx.moveTo(0, yPos);
ctx.lineTo(CHART_WIDTH, yPos);
ctx.stroke();
ctx.strokeStyle = "rgb(64, 64, 64)";
ctx.textBaseline = "middle";
ctx.fillText(i + '%', 10, yPos);
}
// draw the data points
ctx.lineWidth = 2;
ctx.strokeStyle = "rgb(200,0,0)";
ctx.beginPath();
var xPos = (MAX_DATA_POINTS - chartData.length) * widthPerSample;
ctx.moveTo(xPos, CHART_HEIGHT - chartData[0] * 3);
for (var i=1; i<chartData.length; i++)
{
xPos += widthPerSample;
ctx.lineTo(xPos, CHART_HEIGHT - chartData[i] * 3);
}
ctx.stroke();
//ctx.fillRect(10, 10, 100, 100);
}
var socket = null;
function submitValue()
{
socket.send('test', { text: $('#data').val() });
$('#data').val('');
$('#data').focus();
}
$(document).ready(function () {
$('#status').html('connecting');
socket = $.websocket("ws://fryguy.selfip.net:8181/test", {
open: function() {
$('#status').html('connected');
},
close: function() {
$('#status').html('disconnected');
},
events: {
chat_message: function(e) {
$('#messages').append('<li>' + e.value + '</li>');
},
periodic_data: function(e) {
chartData.push(e.value);
if (chartData.length > MAX_DATA_POINTS)
chartData.shift();
updateChart();
},
connected_users: function(e) {
$('#connected_users').html(e.value);
}
}
});
$('#send_msg').click(submitValue);
$(document).bind("keydown", function (e) {
var key = e.keyCode || e.which;
if (key === 13)
submitValue();
});
initCanvas();
});
</script>
</head>
<body>
<div>Status: <span id="status">n/a</span></div>
<div>Number of users: <span id="connected_users">n/a</span></div>
<div>
<input type="text" id="data" size="10">
<input type="button" id="send_msg" value="Send Message">
</div>
<div>
<canvas id="graph" width="600" height="300">Your browser does not support canvas. Sorry.</canvas>
</div>
<ul id="messages"></ul>
<ul id="errors"></ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment