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
You can’t perform that action at this time.