arisetyo/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Galenic">
    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/knockout-2.1.0.js"></script>
    <script src="js/Chart.js"></script>
    <link rel="stylesheet" href="pure-min.css">
    <link rel="stylesheet" href="custom.css">
	<title>Chart.js sample</title>
</head>
<body>

<div class="pure-u-1">

	<div>
		<canvas id="canvas" height="450" width="600"></canvas>
	</div>

</div>

<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript">

	function MainViewModel(data) {
		var self = this;
		var socket = io.connect('http://localhost:8070');

		self.lineChartData = ko.observable({
			labels : ["January","February","March","April","May","June","July"],
			datasets : [
				{
					fillColor : "rgba(151,187,205,0.5)",
					strokeColor : "rgba(151,187,205,1)",
					pointColor : "rgba(151,187,205,1)",
					pointStrokeColor : "#fff",
					data : [65,59,90,81,56,55,40]
				}
			]
		});

		socket.on('pushdata', function (data) {
			self.lineChartData().datasets[0].data.shift();
			self.lineChartData().datasets[0].data.push(data);

			self.initLine();
		});

		self.initLine = function() {
			var options = {
				animation : false,
				scaleOverride : true,
				scaleSteps : 10,//Number - The number of steps in a hard coded scale
				scaleStepWidth : 10,//Number - The value jump in the hard coded scale
				scaleStartValue : 10//Number - The scale starting value
			};

			var ctx = $("#canvas").get(0).getContext("2d");
			var myLine = new Chart(ctx).Line( vm.lineChartData(), options );
		}

	}

	var vm = new MainViewModel();
	ko.applyBindings(vm);
	vm.initLine();

</script>

</body>
</html>

## server.js
var application_root = __dirname,
  express = require('express'),
	path 	= require("path");

app = express();

var	server = require('http').createServer(app),
	io = require('socket.io').listen(server);

app.configure(function () {
	app.use(express.logger('dev'));
	app.use(express.bodyParser());
	app.use(express.static(path.join(application_root, "public")));
});

///DATA
function getRandomInt(min, max) {
	return Math.floor(Math.random() * (max - min + 1)) + min;
}

io.sockets.on('connection', function (socket) {

	setInterval(function(){
		var data = getRandomInt(0,100);
		io.sockets.emit('pushdata', data);
	},2000);

});

server.listen(8070);
console.log('Server is listening on port 8070...');
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="author" content="Galenic">
	<script src="js/jquery-1.9.1.js"></script>
	<script src="js/knockout-2.1.0.js"></script>
	<script src="js/Chart.js"></script>
	<link rel="stylesheet" href="pure-min.css">
	<link rel="stylesheet" href="custom.css">
	<title>Chart.js sample</title>
	</head>
	<body>

	<div class="pure-u-1">

	<div>
	<canvas id="canvas" height="450" width="600"></canvas>
	</div>

	</div>

	<script src="/socket.io/socket.io.js"></script>
	<script type="text/javascript">

	function MainViewModel(data) {
	var self = this;
	var socket = io.connect('http://localhost:8070');

	self.lineChartData = ko.observable({
	labels : ["January","February","March","April","May","June","July"],
	datasets : [
	{
	fillColor : "rgba(151,187,205,0.5)",
	strokeColor : "rgba(151,187,205,1)",
	pointColor : "rgba(151,187,205,1)",
	pointStrokeColor : "#fff",
	data : [65,59,90,81,56,55,40]
	}
	]
	});

	socket.on('pushdata', function (data) {
	self.lineChartData().datasets[0].data.shift();
	self.lineChartData().datasets[0].data.push(data);

	self.initLine();
	});

	self.initLine = function() {
	var options = {
	animation : false,
	scaleOverride : true,
	scaleSteps : 10,//Number - The number of steps in a hard coded scale
	scaleStepWidth : 10,//Number - The value jump in the hard coded scale
	scaleStartValue : 10//Number - The scale starting value
	};

	var ctx = $("#canvas").get(0).getContext("2d");
	var myLine = new Chart(ctx).Line( vm.lineChartData(), options );
	}

	}

	var vm = new MainViewModel();
	ko.applyBindings(vm);
	vm.initLine();

	</script>

	</body>
	</html>
	var application_root = __dirname,
	express = require('express'),
	path = require("path");

	app = express();

	var server = require('http').createServer(app),
	io = require('socket.io').listen(server);

	app.configure(function () {
	app.use(express.logger('dev'));
	app.use(express.bodyParser());
	app.use(express.static(path.join(application_root, "public")));
	});

	///DATA
	function getRandomInt(min, max) {
	return Math.floor(Math.random() * (max - min + 1)) + min;
	}

	io.sockets.on('connection', function (socket) {

	setInterval(function(){
	var data = getRandomInt(0,100);
	io.sockets.emit('pushdata', data);
	},2000);

	});

	server.listen(8070);
	console.log('Server is listening on port 8070...');