Last active
August 12, 2019 00:52
-
-
Save brycehemme/ff01e5dab09650dd56eadadb906ca661 to your computer and use it in GitHub Desktop.
Visualize Fitbit Heart Rate Data. From the Fitbit data export, this tool will visualize one to many heartrate*.json files. This gist is heavily based on the details outlined here: https://jrtechs.net/data-science/a-closer-look-at-fitbit-data
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment