Old school D3 from simpler times

All examples By author By category About

orchestor

Full window Github gist

Dynamic Real-time Chart Using Chart.js, Socket.io, and Knockout.js

<!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('https://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>