GUI/graph.html

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<title>Database connected to CanvasJS</title>
	<script src="socket.io.js"></script>
	<script src="jquery-3.5.1.js"></script>
	<script src="canvasjs.min.js"></script>
</head>

<body>
	<button id='baseline' value="baseline" class="btn-link">Baseline</button>
	<button id='occlusion' value="occlusion" class="btn-link">Occlusion</button>
	<button id='release' value="release" class="btn-link">Cuff Release</button>
	<!-- <a href="/save?event=baseline">Start Baseline</a> -->
	<div id="chartContainer" style="height: 150px; width: 40%;"></div>
	<div id="chartContainer2" style="height: 150px; width: 100%;"></div>
	<div id="chartContainer3" style="height: 150px; width: 100%;"></div>
	<div id="chartContainer4" style="height: 150px; width: 100%;"></div>
	<div id="chartContainer5" style="height: 150px; width: 100%;"></div>
	<div id="chartContainer6" style="height: 150px; width: 100%;"></div>
	<script>
		//defining variables
		var dps = []; //array to store the data to be plotted
		var dps2 = [];
		var dps3 = [];
		var dps4 = [];
		var dps5 = [];
		var dps6 = [];
		var axisXMax = 0, axisXMin = 0;
		var axisX = {};
		var updateRange = 0;
		var resetFlag = false;
		var updateInterval = 100;
		var dataLength = 1000; // number of dataPoints visible at any point
		var cnt = 0;

		var socket = io('http://localhost:90');//socket connection

		//define chartOptions
		var chartOptions = {
			zoomEnabled: true,
			//animationEnabled:true,
			zoomType: "xy",
			rangeChanged: function (e) {
				if (e.trigger === "zoom") {
					axisXMax = e.axisX[0].viewportMaximum + 1;
					console.log(axisXMax);
					axisXMin = e.axisX[0].viewportMinimum + 1;
					resetFlag = false;
					if (updateRange > 0) clearInterval(updateRange);
					updateRange = setInterval(function () {
						updateAxisRange();//defined below
					}, updateInterval);
				}
				else if (e.trigger == "reset") {
					resetFlag = true;
					clearInterval(updateRange);
				}
			},
			title: {
				text: "PAT",
			},
			axisX: axisX,
			data: [
				{
					type: "line",
					dataPoints: dps,
				},
			],
		};
		//
		var chartOptions2 = {
			zoomEnabled: true,
			zoomType: "xy",
			rangeChanged: function (e) {
				if (e.trigger === "zoom") {
					axisXMax = e.axisX[0].viewportMaximum + 1;
					console.log(axisXMax);
					axisXMin = e.axisX[0].viewportMinimum + 1;
					resetFlag = false;
					if (updateRange > 0) clearInterval(updateRange);
					updateRange = setInterval(function () {
						updateAxisRange();//defined below
					}, updateInterval);
				}
				else if (e.trigger == "reset") {
					resetFlag = true;
					clearInterval(updateRange);
				}
			},
			title: {
				text: "BodyTemp",
			},
			axisX: axisX,
			data: [
				{
					type: "line",
					dataPoints: dps2,
				},
			],
		};

		var chartOptions3 = {
			zoomEnabled: true,
			zoomType: "xy",
			rangeChanged: function (e) {
				if (e.trigger === "zoom") {
					axisXMax = e.axisX[0].viewportMaximum + 1;
					console.log(axisXMax);
					axisXMin = e.axisX[0].viewportMinimum + 1;
					resetFlag = false;
					if (updateRange > 0) clearInterval(updateRange);
					updateRange = setInterval(function () {
						updateAxisRange();//defined below
					}, updateInterval);
				}
				else if (e.trigger == "reset") {
					resetFlag = true;
					clearInterval(updateRange);
				}
			},
			title: {
				text: "SpO2",
			},
			axisX: axisX,
			data: [
				{
					type: "line",
					dataPoints: dps3,
				},
			],
		};
		var chartOptions4 = {
			zoomEnabled: true,
			zoomType: "xy",
			rangeChanged: function (e) {
				if (e.trigger === "zoom") {
					axisXMax = e.axisX[0].viewportMaximum + 1;
					console.log(axisXMax);
					axisXMin = e.axisX[0].viewportMinimum + 1;
					resetFlag = false;
					if (updateRange > 0) clearInterval(updateRange);
					updateRange = setInterval(function () {
						updateAxisRange();//defined below
					}, updateInterval);
				}
				else if (e.trigger == "reset") {
					resetFlag = true;
					clearInterval(updateRange);
				}
			},
			title: {
				text: "EnvTemp",
			},
			axisX: axisX,
			data: [
				{
					type: "line",
					dataPoints: dps4,
				},
			],
		};

		var chartOptions5 = {
			zoomEnabled: true,
			zoomType: "xy",
			rangeChanged: function (e) {
				if (e.trigger === "zoom") {
					axisXMax = e.axisX[0].viewportMaximum + 1;
					console.log(axisXMax);
					axisXMin = e.axisX[0].viewportMinimum + 1;
					resetFlag = false;
					if (updateRange > 0) clearInterval(updateRange);
					updateRange = setInterval(function () {
						updateAxisRange();//defined below
					}, updateInterval);
				}
				else if (e.trigger == "reset") {
					resetFlag = true;
					clearInterval(updateRange);
				}
			},
			title: {
				text: "SpO2Cont",
			},
			axisX: axisX,
			data: [
				{
					type: "line",
					dataPoints: dps5,
				},
			],
		};

		var chartOptions6 = {
			zoomEnabled: true,
			zoomType: "xy",
			rangeChanged: function (e) {
				if (e.trigger === "zoom") {
					axisXMax = e.axisX[0].viewportMaximum + 1;
					console.log(axisXMax);
					axisXMin = e.axisX[0].viewportMinimum + 1;
					resetFlag = false;
					if (updateRange > 0) clearInterval(updateRange);
					updateRange = setInterval(function () {
						updateAxisRange();//defined below
					}, updateInterval);
				}
				else if (e.trigger == "reset") {
					resetFlag = true;
					clearInterval(updateRange);
				}
			},
			title: {
				text: "BioZ",
			},
			axisX: axisX,
			data: [
				{
					type: "line",
					dataPoints: dps6,
				},
			],
		};

		//create chart
		var chart = new CanvasJS.Chart("chartContainer", chartOptions);
		chart.render();

		//define updateChart
		var xVal_1 = 0;
		var updateChart = function (upd) {

			count = upd.time.length;

			for (var j = 0; j < count; j++) {

				dps.push({
					x: upd.time[j], y: upd.data[j]
					//  x: upd[j].time,//xVal_1,
					//  y: upd[j].value
				});
				xVal_1++;
			}

			if (dps.length > dataLength + 100) {
				dps.splice(0, count);
			}
			//reset the range of Axis X on selecting the reset option
			if (resetFlag) {
				chart.options.axisX.viewportMinimum = null;
				chart.options.axisX.viewportMaximum = null;
			}

			chart.render();
		};
		//define updateAxisRange: function to update the axis X range on zooming
		var updateAxisRange = function () {
			axisXMax += 1;
			axisXMin += 1;
			chart.options.axisX.viewportMaximum = axisXMax;
			chart.options.axisX.viewportMinimum = axisXMin;
			chart.render();
		};
		////////////////Second Chart\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
		//create chart
		var chart2 = new CanvasJS.Chart("chartContainer2", chartOptions2);
		chart2.render();
		var chart3 = new CanvasJS.Chart("chartContainer3", chartOptions3);
		chart3.render();
		var chart4 = new CanvasJS.Chart("chartContainer4", chartOptions4);
		chart4.render();
		var chart5 = new CanvasJS.Chart("chartContainer5", chartOptions5);
		chart5.render();

		var chart6 = new CanvasJS.Chart("chartContainer6", chartOptions6);
		chart6.render();


		//define updateChart2
		var xVal_2 = 0;
		var updateChart2 = function (upd) {
			count = upd.time.length;
			for (var j = 0; j < count; j++) {

				dps2.push({
					x: upd.time[j], y: upd.data[j]
					//  x: upd[j].time,//xVal_2,
					//  y: upd[j].value
				});
				xVal_2++;
			}
			if (dps2.length > dataLength) {
				dps2.splice(0, count);
			}
			//reset the range of Axis X on selecting the reset option
			if (resetFlag) {
				chart2.options.axisX.viewportMinimum = null;
				chart2.options.axisX.viewportMaximum = null;
			}

			chart2.render();
		};

		var updateChart3 = function (upd) {
			count = upd.time.length;
			for (var j = 0; j < count; j++) {

				dps3.push({
					x: upd.time[j], y: upd.data[j]
					//  x: upd[j].time,//xVal_2,
					//  y: upd[j].value
				});
				xVal_2++;
			}

			if (dps3.length > dataLength) {
				dps3.splice(0, count);
			}
			//reset the range of Axis X on selecting the reset option
			if (resetFlag) {
				chart3.options.axisX.viewportMinimum = null;
				chart3.options.axisX.viewportMaximum = null;
			}

			chart3.render();
		};

		var updateChart4 = function (upd) {
			count = upd.time.length;
			for (var j = 0; j < count; j++) {

				dps4.push({
					x: upd.time[j], y: upd.data[j]
					//  x: upd[j].time,//xVal_2,
					//  y: upd[j].value
				});
				xVal_2++;
			}

			if (dps4.length > dataLength) {
				dps4.splice(0, count);
			}
			//reset the range of Axis X on selecting the reset option
			if (resetFlag) {
				chart4.options.axisX.viewportMinimum = null;
				chart4.options.axisX.viewportMaximum = null;
			}

			chart4.render();
		};

		var updateChart5 = function (upd) {
			count = upd.time.length;
			for (var j = 0; j < count; j++) {

				dps5.push({
					x: upd.time[j], y: upd.data[j]
					//  x: upd[j].time,//xVal_2,
					//  y: upd[j].value
				});
				xVal_2++;
			}

			if (dps5.length > dataLength) {
				dps5.splice(0, count);
			}
			//reset the range of Axis X on selecting the reset option
			if (resetFlag) {
				chart5.options.axisX.viewportMinimum = null;
				chart5.options.axisX.viewportMaximum = null;
			}

			chart5.render();
		};

		var updateChart6 = function (upd) {
			count = upd.time.length;
			for (var j = 0; j < count; j++) {

				dps6.push({
					x: upd.time[j], y: upd.data[j]
					//  x: upd[j].time,//xVal_2,
					//  y: upd[j].value
				});
			}

			if (dps6.length > dataLength) {
				dps6.splice(0, count);
			}
			//reset the range of Axis X on selecting the reset option
			if (resetFlag) {
				chart6.options.axisX.viewportMinimum = null;
				chart6.options.axisX.viewportMaximum = null;
			}

			chart6.render();
		};


		const queryString = window.location.search;
		const urlParams = new URLSearchParams(queryString);
		const uid = urlParams.get('id')
		console.log(uid)
		socket.emit('db', uid)
		// obtaining data from socket io to plot the data
		socket.on(uid, (message) => {
			console.log(message);
			let time = [];
			let data = [];
			if (message.data) {
				Object.keys(message.data).forEach(el => {
					if (el[0] == 't') {
						time.push(Number(el.substr(11)))

					}
					else {
						data.push(message.data[el])
					}
				})
				// console.log(time)
				switch (message.type) {
					case "PData": updateChart({ time: time, data: data }); break;
					case "TData": updateChart2({ time: time, data: data }); break;
					case "SData": updateChart3({ time: time, data: data }); break;
					case "WData": updateChart4({ time: time, data: data }); break;
					case "IData": updateChart5({ time: time, data: data }); break;
					case "EData": updateChart6({ time: time, data: data }); break;
				}
			}
		});

		// var button = document.getElementById('event')
		document.getElementById('baseline').addEventListener('click', function (msg) {
			socket.emit('event', 'baseline')
			console.log('baseline')
		});
		document.getElementById('occlusion').addEventListener('click', function (msg) {
			socket.emit('event', 'occlusion')
			console.log('occlusion')
		});
		document.getElementById('release').addEventListener('click', function (msg) {
			socket.emit('event', 'release')
			console.log('release')
		});

	</script>
</body>

</html>