Basic Column Chart - CanvasJS JavaScript Charts

Basic Column Chart - CanvasJS JavaScript Charts

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
	<title>O.B.A.M.A. Test Data Logging by PLC</title>
	<script src="jquery-3.3.1.min.js"></script>
</head>
	<body>
	<p style="text-align:center">Counter: <label id="counter">0</label></p>
	<script>
        $(document).ready(function()
		{
				
				$.ajaxSetup({ cache: false });
					setInterval(function() 
					{
						$.get("IOCounter.html", function(result)
						{
							$('#counter').text(result.trim());
						});
					},1000);

				
		});
    </script>
    <script>
	window.onload = function()
	{
		var dps = [];
		var chart = new CanvasJS.Chart("chartContainer", 
		{
			exportEnabled: true,
			title :
			{
				text: "Counter"
			},
			axisY: 
			{
				includeZero: false
			},
			axisX:
			{
	
				valueFormatString: "DDD HH:mm:ss"
			},
			data:
			[{
				xValueType: "dateTime",
				type: "spline",
				markerSize: 0,
				dataPoints: dps 
			}]
		});

		var xVal = 0;
		var yVal = 50;
		var updateInterval = 1000;
		var dataLength = 50; // number of dataPoints visible at any point

		var updateChart = function (count) 
		{
			count = count || 1;
			// count is number of times loop runs to generate random dataPoints.
			for (var j = 0; j < count; j++) 
			{	
				dps.push
				({
					x: new Date(),
				});
			xVal++;
			}
			if (dps.length > dataLength) 
				{
					dps.shift();
				}
			chart.render();
		};
	updateChart(dataLength); 
	setInterval(function(){ updateChart() }, updateInterval); 
	}
	</script>
	<div id="chartContainer" style="height: 370px; max-width: 920px; margin: 0px auto;"></div>
	<script src="canvasjs.min.js"></script>
	</body>
</html>