Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
<!-- for use with equally crap server at -->
<!-- you'll need jquery and flot -->
<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>
<h1>Websocket client with flot charting</h1>
<div id="neilllog" style="width: 600px; height: 100px; position: relative; background: orange">
clickdata comes here
<div id="flot_placeholder" style="width: 600px; height: 300px; position: relative; ">
<canvas width="600" height="30" style="position: absolute; left: 0px; top: 0px; "></canvas>
<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(;
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();
$("#button1").click(function () {
socket.send("button clicked");
A simple websocket client which expects json for flot visualization in each message.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment