brycehemme/fitbit-heartrate-data-visualizer.html

## fitbit-heartrate-data-visualizer.html
<html>
<head>
  <script type="text/javascript" src="//unpkg.com/vis-timeline@latest/dist/vis-timeline-graph2d.min.js"></script>
  <link href="//unpkg.com/vis-timeline@latest/dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div class="col-4 shadow-lg p-3 bg-white rounded">
		<label>Heart Rate JSON Files</label>
		<input type="file" id="files" name="files[]" multiple />
		<output id="list"></output>
		<div id="heartRateGraph"></div>
	</div>
	<script>
		function handleFileSelect(evt)
		{
			fetchFilesAsJSONArray(evt).then((data)=>
			{
				generateHeartRateGraph(data);
			})
		}
		document.getElementById('files').addEventListener('change', handleFileSelect, false);

		function fetchFilesAsJSONArray(evt)
		{
			return new Promise((res, rej)=>
			{
				var files = evt.target.files; // FileList object

				var promises = [];

				for (var i = 0, f; f = files[i]; i++)
				{
					promises.push(new Promise((resolve, reject)=>
					{
						var reader = new FileReader();

						reader.onload = function(e)
						{
							resolve(JSON.parse(reader.result));
						};

						reader.onerror= function(e)
						{
							reject(e);
						};
						reader.readAsBinaryString(files[i]);
					}));
				}
				Promise.all(promises).then((data)=>
				{
					res(data);
				}).catch((error)=>
				{
					console.log(error);
					console.log("Unable to Load Data");
					rej(error);
				})
			});
		}
		function generateHeartRateGraph(jsonFiles)
		{
			var items0 = [];
			var items1 = [];
			var items2 = [];
			var items3 = [];

			for(var i = 0; i < jsonFiles.length; i++)
			{
				console.log(jsonFiles[i].length);
				for(var j = 0; j < jsonFiles[i].length; j++)
				{
					var localTime = new Date(jsonFiles[i][j].dateTime);
			        localTime.setHours(localTime.getHours() - 5);
			 		if (jsonFiles[i][j].value.confidence == 0)
			 		{
			 			items0.push({y:jsonFiles[i][j].value.bpm, x:localTime});
					}
			 		if (jsonFiles[i][j].value.confidence == 1)
			 		{
			 			items1.push({y:jsonFiles[i][j].value.bpm, x:localTime});
					}
			 		if (jsonFiles[i][j].value.confidence == 2)
			 		{
			 			items2.push({y:jsonFiles[i][j].value.bpm, x:localTime});
					}
			 		if (jsonFiles[i][j].value.confidence == 3)
			 		{
			 			items3.push({y:jsonFiles[i][j].value.bpm, x:localTime});
					}
				}
			 }

			 drawGraph(items3, 3);
			 drawGraph(items2, 2);
			 drawGraph(items1, 1);
			 drawGraph(items0, 0);
		}

	function drawGraph(items, confidence)
	{
		var dataset = new vis.DataSet(items);
		var options = {
			dataAxis: {
				showMinorLabels: true,
				left: {
					title: {
						text: "Heart Rate w/ Confidence of " + confidence.toString()
					}
				}
			}
		};
		var container = document.getElementById("heartRateGraph");
		try {
		var graph2d = new vis.Graph2d(container, dataset, options);
		graph2d.on('rangechanged', graphMoved);
			graphsOnPage.push(graph2d);
		}
		 catch(error) {
			console.error(error);
		 }
	}

	</script>
</body>
</html>
	<html>
	<head>
	<script type="text/javascript" src="//unpkg.com/vis-timeline@latest/dist/vis-timeline-graph2d.min.js"></script>
	<link href="//unpkg.com/vis-timeline@latest/dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
	<div class="col-4 shadow-lg p-3 bg-white rounded">
	<label>Heart Rate JSON Files</label>
	<input type="file" id="files" name="files[]" multiple />
	<output id="list"></output>
	<div id="heartRateGraph"></div>
	</div>
	<script>
	function handleFileSelect(evt)
	{
	fetchFilesAsJSONArray(evt).then((data)=>
	{
	generateHeartRateGraph(data);
	})
	}
	document.getElementById('files').addEventListener('change', handleFileSelect, false);

	function fetchFilesAsJSONArray(evt)
	{
	return new Promise((res, rej)=>
	{
	var files = evt.target.files; // FileList object

	var promises = [];

	for (var i = 0, f; f = files[i]; i++)
	{
	promises.push(new Promise((resolve, reject)=>
	{
	var reader = new FileReader();

	reader.onload = function(e)
	{
	resolve(JSON.parse(reader.result));
	};

	reader.onerror= function(e)
	{
	reject(e);
	};
	reader.readAsBinaryString(files[i]);
	}));
	}
	Promise.all(promises).then((data)=>
	{
	res(data);
	}).catch((error)=>
	{
	console.log(error);
	console.log("Unable to Load Data");
	rej(error);
	})
	});
	}
	function generateHeartRateGraph(jsonFiles)
	{
	var items0 = [];
	var items1 = [];
	var items2 = [];
	var items3 = [];

	for(var i = 0; i < jsonFiles.length; i++)
	{
	console.log(jsonFiles[i].length);
	for(var j = 0; j < jsonFiles[i].length; j++)
	{
	var localTime = new Date(jsonFiles[i][j].dateTime);
	localTime.setHours(localTime.getHours() - 5);
	if (jsonFiles[i][j].value.confidence == 0)
	{
	items0.push({y:jsonFiles[i][j].value.bpm, x:localTime});
	}
	if (jsonFiles[i][j].value.confidence == 1)
	{
	items1.push({y:jsonFiles[i][j].value.bpm, x:localTime});
	}
	if (jsonFiles[i][j].value.confidence == 2)
	{
	items2.push({y:jsonFiles[i][j].value.bpm, x:localTime});
	}
	if (jsonFiles[i][j].value.confidence == 3)
	{
	items3.push({y:jsonFiles[i][j].value.bpm, x:localTime});
	}
	}
	}

	drawGraph(items3, 3);
	drawGraph(items2, 2);
	drawGraph(items1, 1);
	drawGraph(items0, 0);
	}

	function drawGraph(items, confidence)
	{
	var dataset = new vis.DataSet(items);
	var options = {
	dataAxis: {
	showMinorLabels: true,
	left: {
	title: {
	text: "Heart Rate w/ Confidence of " + confidence.toString()
	}
	}
	}
	};
	var container = document.getElementById("heartRateGraph");
	try {
	var graph2d = new vis.Graph2d(container, dataset, options);
	graph2d.on('rangechanged', graphMoved);
	graphsOnPage.push(graph2d);
	}
	catch(error) {
	console.error(error);
	}
	}

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