SergeyStorm/canvas-graph.html

## canvas-graph.html
<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<meta viewport="width=device-width">
	<title>Canvas</title>
	<style type="text/css">
		html, body {
		    margin: 0;
		    padding: 0;
		    width: 100%;
		    height: 100%;
		    display: table
		}
		#canvas {
	        //width:50%;
	        //height:30px;
	        position:absolute;
	        margin:auto;
	        top:0;bottom:0;
	        left:0;right:0;
	        max-width:100%;
	        max-height:100%;
	        overflow:auto;
		}
	</style>
</head>
<html>
<body>
	<canvas id="canvas" width="600" height="350"></canvas>
	<script type="text/javascript">
		var hist = 2000;
		var last = hist - 1;
		var data = [];
		var initb = 0;
		var canvas;
		var ctx;
		var cW;
		var cH;

		function init() {
			canvas = document.getElementById('canvas');
			ctx = canvas.getContext("2d");
			//ctx.canvas.width  = window.innerWidth - 100;
			//ctx.canvas.height = window.innerHeight - 100;
			cW = canvas.width;
			cH = canvas.height;
			for( i = 0; i < last; i++ ) {
				data[i] = Math.random() * cH;
			}
			initb = 1;
		}

		function httpGet( theUrl ) {
			var xmlHttp = null;
			xmlHttp = new XMLHttpRequest();
			xmlHttp.open( "GET", theUrl, false );
			xmlHttp.send( null );
			return xmlHttp.responseText;
		}

		function draw() {
			//ctx.clearRect( 0, 0, cW, cH );
			for( x=0; x < cW; x++ ) {
				ctx.fillStyle = "green";
				ctx.fillRect( x, cH, 1, -data[x] );
				ctx.fillStyle = "#FFFFFF";
				ctx.fillRect( x, 0 , 1, cH-data[x] );
				ctx.fillStyle = 'black';
				ctx.strokeRect( 0, 0, cW, cH );
			}
		}

		function update() {
			if (initb) {
				//var result = httpGet("/data");
				//document.getElementById('label').innerHTML = result;
				data.shift();
				data.push(Math.random()*cH);
				//draw();
				window.requestAnimationFrame(draw());
			}
		}

		var timerId = setInterval(function() { update(); }, 50);

		init();
	</script>
</body>
</html>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<meta viewport="width=device-width">
	<title>Canvas</title>
	<style type="text/css">
	html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	display: table
	}
	#canvas {
	//width:50%;
	//height:30px;
	position:absolute;
	margin:auto;
	top:0;bottom:0;
	left:0;right:0;
	max-width:100%;
	max-height:100%;
	overflow:auto;
	}
	</style>
	</head>
	<html>
	<body>
	<canvas id="canvas" width="600" height="350"></canvas>
	<script type="text/javascript">
	var hist = 2000;
	var last = hist - 1;
	var data = [];
	var initb = 0;
	var canvas;
	var ctx;
	var cW;
	var cH;

	function init() {
	canvas = document.getElementById('canvas');
	ctx = canvas.getContext("2d");
	//ctx.canvas.width = window.innerWidth - 100;
	//ctx.canvas.height = window.innerHeight - 100;
	cW = canvas.width;
	cH = canvas.height;
	for( i = 0; i < last; i++ ) {
	data[i] = Math.random() * cH;
	}
	initb = 1;
	}

	function httpGet( theUrl ) {
	var xmlHttp = null;
	xmlHttp = new XMLHttpRequest();
	xmlHttp.open( "GET", theUrl, false );
	xmlHttp.send( null );
	return xmlHttp.responseText;
	}

	function draw() {
	//ctx.clearRect( 0, 0, cW, cH );
	for( x=0; x < cW; x++ ) {
	ctx.fillStyle = "green";
	ctx.fillRect( x, cH, 1, -data[x] );
	ctx.fillStyle = "#FFFFFF";
	ctx.fillRect( x, 0 , 1, cH-data[x] );
	ctx.fillStyle = 'black';
	ctx.strokeRect( 0, 0, cW, cH );
	}
	}

	function update() {
	if (initb) {
	//var result = httpGet("/data");
	//document.getElementById('label').innerHTML = result;
	data.shift();
	data.push(Math.random()*cH);
	//draw();
	window.requestAnimationFrame(draw());
	}
	}

	var timerId = setInterval(function() { update(); }, 50);

	init();
	</script>
	</body>
	</html>