Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<html>
<!-- for use with equally crap server at https://gist.github.com/821606 -->
<!-- you'll need jquery and flot -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Flot Log presenter with External json file</title>
<link href="./clientsupport/layout.css" rel="stylesheet" type="text/css">
<script language="javascript" type="text/javascript" src="./clientsupport/jquery.js"></script>
<script language="javascript" type="text/javascript" src="./clientsupport/jquery.flot.js"></script>
</head>
<body>
<h1>Websocket client with flot charting</h1>
<div id="neilllog" style="width: 600px; height: 100px; position: relative; background: orange">
clickdata comes here
</div>
<div id="flot_placeholder" style="width: 600px; height: 300px; position: relative; ">
<canvas width="600" height="30" style="position: absolute; left: 0px; top: 0px; "></canvas>
</div>
<p>Actions:
<button id="button1">Button 1</button></p>
<script id="source">
$(function () {
var socket = new WebSocket('ws://localhost:12345');
socket.onopen = function(event) {
socket.send('Hello from flot client. Gimme json time series data to plot please.');
};
socket.onclose = function(event) { alert('websocket closed'); }
socket.onmessage = function(event) {
var thejson = JSON.parse(event.data);
var td = thejson.timedata;
var plot = $.plot($("#flot_placeholder"), [td], {
xaxis: {
mode: "time" ,
},
grid: { hoverable: true, clickable: true },
series: { points: { show: true }}
});
var series = plot.getData();
$("#logseriescount").text(series.length);
$("#loglinecount").text(series[0].data.length);
socket.send("more");
}
$("#button1").click(function () {
alert("clicked");
socket.send("button clicked");
});
});
</script>
A simple websocket client which expects json for flot visualization in each message.
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.