Untitled

<!DOCTYPE html>

<html>


<head>

</head>


<body>

	<div id="wrapper">
		<div id="mainchart">
		<canvas id="Shell" ></canvas>
		</div>
		<div id="inputs">
		<input type="button" value="Size" onclick="changesize()">
		<input id="inputfield" type="text">
		<input type="button" value="Submit" onclick="input()">
		</div>
		<div id="checks">
		<input type="checkbox" id="check0">
		<input type="checkbox" id="check1">
		<input type="checkbox" id="check2">
		<input type="checkbox" id="check3">
		<input type="checkbox" id="check4">
		<input type="checkbox" id="check5">
		<input type="checkbox" id="check6">
		<input type="checkbox" id="check7">
		<input type="checkbox" id="check8">
		</div>
	</div>


	<script>
		var size = 500;
		var data =[200,200,200,200,200,200,200,200,200];
		var colour =[0,1,2,3,4,5,6,7,8]
		var ticked =[false,false,false,false,false,false,false,false,false]
		for (var i = 0; i < 9; i++){colour[i] = randomcolour();}
		var canvas = document.getElementById("Shell");
		var ctx = canvas.getContext("2d");
		var ctx1 = canvas.getContext("2d");

		function draw(){
			var e = size/50*7;
			document.getElementById("Shell").width = size;
			document.getElementById("Shell").height = size;
			ctx.fillStyle = "#ffffff"; ctx.fillRect(0,0,size,size);
			ctx.moveTo(size/10*8.6,size/10); ctx.lineTo(size/10*8.6,size/10*9);
			ctx.moveTo(size/10,size/10); ctx.lineTo(size/10,size/10*9);
			ctx.moveTo(size/10,size/10*9); ctx.lineTo(size/10*8.6,size/10*9);
			ctx.moveTo(size/10,size/10); ctx.lineTo(size/10*8.6,size/10);
			ctx.stroke();
			ctx.fillStyle = "#888888";
			for (var i = 2; i < 9; i++){
				ctx.moveTo(size/10,size/10*i); ctx.lineTo(size/10*8.6,size/10*i); ctx.stroke();
			}
			for (var i = 0; i < 9; i++){
				ctx.fillStyle = colour[i];
				ctx.fillRect(e,size/10*9-data[i],size/50*2,data[i]);
				e += size/50*4;
			}
			e = size/50*8;
			ctx.font = size/50*2+"px Arial";
			ctx.textAlign="center";
			ctx.textBaseline="middle";
			ctx.fillStyle = "#000000";
			ctx.fillText(Math.round(size/10*8),size/50*3,size/10);
			ctx.fillText(Math.round(size/10*7),size/50*3,size/10*2);
			ctx.fillText(Math.round(size/10*6),size/50*3,size/10*3);
			ctx.fillText(Math.round(size/10*5),size/50*3,size/10*4);
			ctx.fillText(Math.round(size/10*4),size/50*3,size/10*5);
			ctx.fillText(Math.round(size/10*3),size/50*3,size/10*6);
			ctx.fillText(Math.round(size/10*2),size/50*3,size/10*7);
			ctx.fillText(Math.round(size/10),size/50*3,size/10*8);
			ctx.fillText("0",size/50*3,size/10*9);
			for (var i = 0; i < 9; i++){
				ctx.fillText(data[i],e,size/10*9.2);
				e += size/50*4;
			}
			e = size/50*7;

		}

		function randomcolour(){
			var x = Math.floor(Math.random()* 256);
			var y = Math.floor(Math.random()* 256);
			var z = Math.floor(Math.random()* 256);
			var output = "#" + x.toString(16) + y.toString(16) + z.toString(16);
			return output;
		}

		function input(){
			for (var i = 0; i < 9; i++){
				if (document.getElementById("check"+i).checked == true){ticked[i]=true;} else{ticked[i]=false;}
				if (ticked[i]==true){data[i] = document.getElementById('inputfield').value;}
				if (data[i] > size/10*8){data[i] = size/10*8;}
			}
			document.getElementById("inputfield").value = "";
			for (var i = 0; i < 9; i++){document.getElementById("check"+i).checked = false}
			draw()
		}

		function changesize(){
			size = document.getElementById('inputfield').value/10*12.5;
			draw()
			document.getElementById("inputfield").value = "";
		}

		draw()

	</script>

	<style>
	#mainchart{
	margin-left: auto;
    margin-right: auto;
	width:500px;
	}
	#inputs{
	margin-left: auto;
    margin-right: auto;
	width:285px;
	}
	#checks{
	margin-left: auto;
    margin-right: auto;
	width:230px;
	}
	</style>


</body>


</html>