Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Add socket.io example

  • Loading branch information...
commit 5069d669aafbaef65a04f2e72664296182e476c2 1 parent f91fce2
@aw aw authored
View
13 examples/socket.io/README.md
@@ -0,0 +1,13 @@
+# Rickshaw + Socket.io
+
+Just a simple example for Websockets support using Rickshaw + Socket.io
+
+# Usage
+
+```
+cd examples/socket.io
+npm install
+node app.js
+```
+
+Then visit `http://localhost:8000` to see your graphs updated every second.
View
41 examples/socket.io/app.js
@@ -0,0 +1,41 @@
+express = require('express');
+app = express();
+server = require('http').createServer(app)
+io = require('socket.io').listen(server);
+path = require('path');
+
+server.listen(8000, function() {
+ console.log("Started a server on port 8000");
+});
+
+app.use(express.static(path.join(__dirname, '../../')));
+app.get('/', function (req, res) {
+ res.sendfile(__dirname + '/socket.io.html');
+});
+
+io.sockets.on('connection', function (socket) {
+ incr = 0;
+ var sendData = function() {
+ data = [
+ {
+ "color": "blue",
+ "name": "New York",
+ "data": [ { "x": 0, "y": incr }, { "x": 1, "y": 49 }, { "x": 2, "y": 38 }, { "x": 3, "y": 30 }, { "x": 4, "y": 32 } ]
+ }, {
+ "color": "red",
+ "name": "London",
+ "data": [ { "x": 0, "y": 19 }, { "x": 1, "y": incr }, { "x": 2, "y": 29 }, { "x": 3, "y": 20 }, { "x": 4, "y": 14 } ]
+ }, {
+ "color": "black",
+ "name": "Tokyo",
+ "data": [ { "x": 0, "y": 8 }, { "x": 1, "y": 12 }, { "x": 2, "y": incr }, { "x": 3, "y": 11 }, { "x": 4, "y": 10 } ]
+ }
+ ]
+ socket.emit('rickshaw', data);
+ incr++;
+ }
+ var run = setInterval(sendData, 1000);
+ socket.on('disconnect', function() {
+ clearInterval(run);
+ });
+});
View
16 examples/socket.io/package.json
@@ -0,0 +1,16 @@
+{
+ "name": "rickshaw-socket.io",
+ "version": "0.0.1",
+ "description": "Rickshaw socket.io support",
+ "main": "app.js",
+ "private": true,
+ "scripts": {
+ "start": "node app.js"
+ },
+ "dependencies": {
+ "express": "3.3.5",
+ "socket.io": "~0.9.16"
+ },
+ "author": "Alex Williams, Unscramble <license@unscramble.jp>",
+ "license": "MIT"
+}
View
44 examples/socket.io/socket.io.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<head>
+ <link type="text/css" rel="stylesheet" href="../src/css/graph.css">
+ <link type="text/css" rel="stylesheet" href="../examples/css/lines.css">
+
+ <script src="../vendor/d3.v2.js"></script>
+
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
+ <script src="/socket.io/socket.io.js"></script>
+
+ <script src="../rickshaw.js"></script>
+</head>
+<body>
+
+<div id="chart_container">
+ <div id="chart"></div>
+</div>
+
+<script>
+
+Rickshaw.Graph.Socketio.Static = Rickshaw.Class.create( Rickshaw.Graph.Socketio, {
+ request: function() {
+ var socket = io.connect(this.dataURL);
+ thisData = this;
+ socket.on('rickshaw', function (data) {
+ console.log("Got some fancy Websocket data: ");
+ console.log(data);
+ thisData.success(data);
+ });
+ }
+} );
+
+var socketioGraph = new Rickshaw.Graph.Socketio.Static( {
+ element: document.getElementById("chart"),
+ width: 400,
+ height: 200,
+ renderer: 'line',
+ dataURL: "http://localhost",
+ onData: function(d) { Rickshaw.Series.zeroFill(d); return d }
+} );
+
+</script>
+
+</body>
Please sign in to comment.
Something went wrong with that request. Please try again.