index.html

<!DOCTYPE html>

<html lang= "en">

	<head>
		<meta charset = "utf-8">
		<title>Chart.js Radial Chart</title>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>
		<script>
				var socket = io();
		</script>
	</head>


	<body>
		<div>
		  <canvas id="chart-area" width="200" height="200"></canvas>
		  <!-- changing width and height scales overall arc also -->
		</div>
		<button id="randomizeData" style="display: none;" >Randomize Data</button>

		<DIV style="position: absolute; top:90px; left:80px;">
		<p id="log" style="font-family:verdana; font-size:120%"></p>
		</DIV>

		<script src="Chart.min.js"></script>
		<script src="Chart.RadialGauge.umd.js"></script>
		<script src="jquery.min.js"></script>
		<script>
			cpuUsageValue = 0;
			var randomScalingFactor = function() {
				socket.on('message', function(data){
					//console.log('CPU usaga value every second', data)
					cpuUsageValue = data
					data2 = cpuUsageValue
					var data3 = parseFloat(data2).toPrecision(3);
					var num2string = data3.toString();
					document.getElementById("log").innerHTML = num2string + '%';//cpuUsageValue;
				})
				return cpuUsageValue;
			};
		</script>
		<div><script src="myScript.js" type="text/javascript"></script></div>
  </body>
</html>
