Current state
This commit is contained in:
@@ -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.
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
@@ -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"
|
||||
}
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user