tricknotes/app.js

## app.js
var sys = require("sys");

var express = require("express");

// see http://github.com/redsquirrel/simple_pusher
var simple_pusher = require(__dirname + "/lib/simple_pusher");

var GraphData = require(__dirname + "/qa_data").GraphData;
var graphData = new GraphData(["yes", "little", "no"]);

// write your Pusher setting
var pusherConfig = {
  appId:  '',
  key:    '',
  secret: ''
};

var app = express.createServer();

// app config
app.configure(function(){
  app.use(express.staticProvider(__dirname + '/public'));
});

app.get("/", function(req, res) {
    res.render(__dirname + "/public/index.html");
});

app.get("/push/:fav", function(req, res){
    graphData.increment(req.params["fav"]);

    var data = graphData.toData(new Date());

    simple_pusher.trigger(pusherConfig, "graph", "update", data);

    res.send("OK");
});

app.listen(8000);


## index.html
<!DOCTYPE HTML>
<html>
  <head>
    <title>Demo-App</title>
      <!-- see http://bitbucket.org/cleonello/jqplot/downloads/ -->
      <!--[if IE]><script language="javascript" type="text/javascript" src="/js/dist/excanvas.min.js"></script><![endif]-->
      <script src='/js/jquery-1.4.4.min.js' type='text/javascript'></script>
      <script language="javascript" type="text/javascript" src="/js/dist/jquery.jqplot.min.js"></script>
      <link rel="stylesheet" type="text/css" href="/js/dist/jquery.jqplot.css" />

      <script src='http://js.pusherapp.com/1.6/pusher.min.js' type='text/javascript'></script>
      <link rel="stylesheet" type="text/css" href="/css/main.css" />
  </head>
  <body>
    <table align="center">
      <tr>
      <td><a href="#" onclick="$.get('/push/yes'); return false" class="yes">Yes</a></td>
      <td><a href="#" onclick="$.get('/push/little'); return false" class="little">A little</a></td>
      <td><a href="#" onclick="$.get('/push/no'); return false" class="no">No</a></td>
      </tr>
    </table>
    <div id="main" height="400"/>
    <script src='/js/main.js' type='text/javascript'></script>
  </body>
</html>

## main.css
/* public/css/main.css */
a {
  border:1px solid #FFFFFF;
  color:#FFFFFF;
  display:block;
  font-size:38px;
  font-weight:bold;
  outline:1px solid #98BF21;
  padding:3px 0 4px;
  text-align:center;
  text-decoration:none;
  width: 280px;
  height: 100px;
}

a.yes {
  color: white;
  background-color: #cc1313;
  outline:1px solid #cc1313;
}

a.little{
  color: white;
  background-color: #98BF21;
  outline:1px solid #98BF21;
}

a.no {
  color: white;
  background-color: #3333bb;
  outline:1px solid #3333bb;
}

## main.js
// public/js/main.js
jQuery(function($) {
    // write your Pusher key
    var key = '';

    var pusher = new Pusher(key);

    pusher.bind('pusher:connection_established', function() {
        // first render
        $.get("/push/start");
    });

    // set channel
    pusher.subscribe("graph");

    // data on update
    pusher.bind("update", function(data) {
        renderGraph(data);
    });

    var renderGraph = function(data) {
        $("#main").empty();
        $.jqplot("main",
            data, {
                legend: {show: true},
                title: "Enjoy 'Sapporo.js'?",
                series: [
                    {label: "Yes"}, {label: "A little"}, {label: "No"}
                ]
         });
    }
});

## qa_data.js
/*
 * グラフ表示用簡易データストア
 * 過去のデータの破棄をしていないので、メモリ使い尽くすと思います。
 * ちゃんとやるならデータベースへ！
 */

// graph data for jqplot
var GraphRow = function(count) {
    this.row = {};

    if (count) {
        this.count = count;
    }
}

// default count
GraphRow.prototype.count = 10;

// increment current point
GraphRow.prototype.increment = function() {
    var date = new Date();

    var time = this.symbolize(date);

    this.row[time] = (this.row[time] || 0) + 1;
}

GraphRow.prototype.format = function(date) {
    // clone
    date = new Date(date.getTime());

    // TODO move to setting
    date.setSeconds(0);
    date.setMilliseconds(0);

    return date;
}

GraphRow.prototype.symbolize = function(date) {
    return this.format(date).getTime();
}

// format to 'jqplot''
GraphRow.prototype.toData = function(current) {
    var data = [];

    var key =  Number(this.symbolize(current));
    var point;

    // bad code!
    for (var i = 0; i < this.count; i++, key -= 60000) {
        point = [key / 10000, (this.row[key] ? this.row[key] : 0)];
        data.push(point);

    }

    return data.reverse();
}

// graph data for 'jqplot''
var GraphData = function(keys) {
    this.keys = keys;
    var data = this.data = {};
    this.eachKey(function(key) {
        data[key] = new GraphRow();
    });
}

GraphData.prototype.eachKey = function(fn) {
    for (var i = 0, l = this.keys.length; i < l; i++) {
        fn(this.keys[i]);
    }
}

GraphData.prototype.toData = function(current) {
    var data = this.data;
    var send = [];
    this.eachKey(function(key){
        send.push(data[key].toData(current));
    });
    return send;
}

GraphData.prototype.increment = function(key) {
    if (this.data.hasOwnProperty(key)) {
        this.data[key].increment();
    }
};

module.exports.GraphRow = GraphRow;
module.exports.GraphData = GraphData;
	var sys = require("sys");

	var express = require("express");

	// see http://github.com/redsquirrel/simple_pusher
	var simple_pusher = require(__dirname + "/lib/simple_pusher");

	var GraphData = require(__dirname + "/qa_data").GraphData;
	var graphData = new GraphData(["yes", "little", "no"]);

	// write your Pusher setting
	var pusherConfig = {
	appId: '',
	key: '',
	secret: ''
	};

	var app = express.createServer();

	// app config
	app.configure(function(){
	app.use(express.staticProvider(__dirname + '/public'));
	});

	app.get("/", function(req, res) {
	res.render(__dirname + "/public/index.html");
	});

	app.get("/push/:fav", function(req, res){
	graphData.increment(req.params["fav"]);

	var data = graphData.toData(new Date());

	simple_pusher.trigger(pusherConfig, "graph", "update", data);

	res.send("OK");
	});

	app.listen(8000);
	<!DOCTYPE HTML>
	<html>
	<head>
	<title>Demo-App</title>
	<!-- see http://bitbucket.org/cleonello/jqplot/downloads/ -->
	<!--[if IE]><script language="javascript" type="text/javascript" src="/js/dist/excanvas.min.js"></script><![endif]-->
	<script src='/js/jquery-1.4.4.min.js' type='text/javascript'></script>
	<script language="javascript" type="text/javascript" src="/js/dist/jquery.jqplot.min.js"></script>
	<link rel="stylesheet" type="text/css" href="/js/dist/jquery.jqplot.css" />

	<script src='http://js.pusherapp.com/1.6/pusher.min.js' type='text/javascript'></script>
	<link rel="stylesheet" type="text/css" href="/css/main.css" />
	</head>
	<body>
	<table align="center">
	<tr>
	<td><a href="#" onclick="$.get('/push/yes'); return false" class="yes">Yes</a></td>
	<td><a href="#" onclick="$.get('/push/little'); return false" class="little">A little</a></td>
	<td><a href="#" onclick="$.get('/push/no'); return false" class="no">No</a></td>
	</tr>
	</table>
	<div id="main" height="400"/>
	<script src='/js/main.js' type='text/javascript'></script>
	</body>
	</html>
	/* public/css/main.css */
	a {
	border:1px solid #FFFFFF;
	color:#FFFFFF;
	display:block;
	font-size:38px;
	font-weight:bold;
	outline:1px solid #98BF21;
	padding:3px 0 4px;
	text-align:center;
	text-decoration:none;
	width: 280px;
	height: 100px;
	}

	a.yes {
	color: white;
	background-color: #cc1313;
	outline:1px solid #cc1313;
	}

	a.little{
	color: white;
	background-color: #98BF21;
	outline:1px solid #98BF21;
	}

	a.no {
	color: white;
	background-color: #3333bb;
	outline:1px solid #3333bb;
	}
	// public/js/main.js
	jQuery(function($) {
	// write your Pusher key
	var key = '';

	var pusher = new Pusher(key);

	pusher.bind('pusher:connection_established', function() {
	// first render
	$.get("/push/start");
	});

	// set channel
	pusher.subscribe("graph");

	// data on update
	pusher.bind("update", function(data) {
	renderGraph(data);
	});

	var renderGraph = function(data) {
	$("#main").empty();
	$.jqplot("main",
	data, {
	legend: {show: true},
	title: "Enjoy 'Sapporo.js'?",
	series: [
	{label: "Yes"}, {label: "A little"}, {label: "No"}
	]
	});
	}
	});
	/*
	* グラフ表示用簡易データストア
	* 過去のデータの破棄をしていないので、メモリ使い尽くすと思います。
	* ちゃんとやるならデータベースへ！
	*/

	// graph data for jqplot
	var GraphRow = function(count) {
	this.row = {};

	if (count) {
	this.count = count;
	}
	}

	// default count
	GraphRow.prototype.count = 10;

	// increment current point
	GraphRow.prototype.increment = function() {
	var date = new Date();

	var time = this.symbolize(date);

	this.row[time] = (this.row[time] \|\| 0) + 1;
	}

	GraphRow.prototype.format = function(date) {
	// clone
	date = new Date(date.getTime());

	// TODO move to setting
	date.setSeconds(0);
	date.setMilliseconds(0);

	return date;
	}

	GraphRow.prototype.symbolize = function(date) {
	return this.format(date).getTime();
	}

	// format to 'jqplot''
	GraphRow.prototype.toData = function(current) {
	var data = [];

	var key = Number(this.symbolize(current));
	var point;

	// bad code!
	for (var i = 0; i < this.count; i++, key -= 60000) {
	point = [key / 10000, (this.row[key] ? this.row[key] : 0)];
	data.push(point);

	}

	return data.reverse();
	}

	// graph data for 'jqplot''
	var GraphData = function(keys) {
	this.keys = keys;
	var data = this.data = {};
	this.eachKey(function(key) {
	data[key] = new GraphRow();
	});
	}

	GraphData.prototype.eachKey = function(fn) {
	for (var i = 0, l = this.keys.length; i < l; i++) {
	fn(this.keys[i]);
	}
	}

	GraphData.prototype.toData = function(current) {
	var data = this.data;
	var send = [];
	this.eachKey(function(key){
	send.push(data[key].toData(current));
	});
	return send;
	}

	GraphData.prototype.increment = function(key) {
	if (this.data.hasOwnProperty(key)) {
	this.data[key].increment();
	}
	};

	module.exports.GraphRow = GraphRow;
	module.exports.GraphData = GraphData;