Untitled

<!doctype html>
<html>
	<head>
		<title>Radar Chart</title>
		<script src="../Chart.js"></script>
		<meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
		<style>
			canvas{
			}
		</style>
	</head>
	<body>
		<div style="width:30%;">
			<canvas id="canvas" height="300" width="300"></canvas>
			<div>
				<input id="eating" onblur="update()" type="text"></input>
				<input id="drinking" onblur="update()" type="text"></input>
				<input id="sleeping" onblur="update()" type="text"></input>
				<input id="designing" onblur="update()" type="text"></input>
				<input id="coding" onblur="update()" type="text"></input>
				<input id="cycling" onblur="update()" type="text"></input>
			</div>
		</div>
	<script>
	var radarChartData = {
		labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling"],
		datasets: [
			{
				label: "My First dataset",
				fillColor: "rgba(220,220,220,0.2)",
				strokeColor: "rgba(220,220,220,1)",
				pointColor: "rgba(220,220,220,1)",
				pointStrokeColor: "#fff",
				pointHighlightFill: "#fff",
				pointHighlightStroke: "rgba(220,220,220,1)",
				data: [0,0,0,0,0,0]
			}
		]
	};

	window.onload = function(){
		window.myRadar = new Chart(document.getElementById("canvas").getContext("2d")).Radar(radarChartData, {
			responsive: true
		});
	}

	function update() {
		console.log(window.myRadar);
		window.myRadar.datasets[0].points[0].value = document.getElementById('eating').value;
		window.myRadar.datasets[0].points[1].value = document.getElementById('drinking').value;
		window.myRadar.datasets[0].points[2].value = document.getElementById('sleeping').value;
		window.myRadar.datasets[0].points[3].value = document.getElementById('designing').value;
		window.myRadar.datasets[0].points[4].value = document.getElementById('coding').value;
		window.myRadar.datasets[0].points[5].value = document.getElementById('cycling').value;
		window.myRadar.update();
	}

	</script>
	</body>
</html>