You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
138 lines
4.1 KiB
138 lines
4.1 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
|
|
<script src="lib/moment.min.js"></script>
|
|
<link href="vis/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
|
|
<script src="vis/vis.js"></script>
|
|
|
|
<!-- jQuery library -->
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
|
</head>
|
|
<div id="heartRateGraph"></div>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-4 shadow-lg p-3 bg-white rounded">
|
|
<input type="file" id="files" name="files[]" multiple />
|
|
<output id="list"></output>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
|
|
<footer>
|
|
<script>
|
|
|
|
function generateHeartRateGraph(jsonFiles)
|
|
{
|
|
/*
|
|
var container = document.getElementById('heartRateGraph');
|
|
var items = [
|
|
{x: '2014-06-11', y: 10},
|
|
{x: '2014-06-12', y: 25},
|
|
{x: '2014-06-13', y: 30},
|
|
{x: '2014-06-14', y: 10},
|
|
{x: '2014-06-15', y: 15},
|
|
{x: '2014-06-16', y: 30}
|
|
];
|
|
|
|
var dataset = new vis.DataSet(items);
|
|
var options = {
|
|
start: '2014-06-10',
|
|
end: '2014-06-18'
|
|
};
|
|
var graph2d = new vis.Graph2d(container, dataset, options);
|
|
*/
|
|
|
|
console.log(jsonFiles);
|
|
|
|
var items = [];
|
|
|
|
for(var i = 0; i < jsonFiles.length; i++)
|
|
{
|
|
console.log(jsonFiles[i].length);
|
|
for(var j = 0; j < jsonFiles[i].length; j++)
|
|
{
|
|
//console.log(jsonFiles[i][j]);
|
|
items.push({y:jsonFiles[i][j].value.bpm, x:jsonFiles[i][j].dateTime})
|
|
|
|
}
|
|
}
|
|
|
|
var dataset = new vis.DataSet(items);
|
|
var options = {
|
|
dataAxis: {
|
|
showMinorLabels: true,
|
|
left: {
|
|
title: {
|
|
text: "Heart Rate"
|
|
}
|
|
}
|
|
}
|
|
};
|
|
var container = document.getElementById("heartRateGraph");
|
|
var graph2d = new vis.Graph2d(container, dataset, options);
|
|
|
|
console.log(items);
|
|
}
|
|
|
|
|
|
function handleFileSelect(evt)
|
|
{
|
|
var files = evt.target.files; // FileList object
|
|
|
|
// files is a FileList of File objects. List some properties.
|
|
var output = [];
|
|
|
|
var promises = [];
|
|
|
|
for (var i = 0, f; f = files[i]; i++)
|
|
{
|
|
output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
|
|
f.size, ' bytes, last modified: ',
|
|
f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
|
|
'</li>');
|
|
|
|
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]);
|
|
//console.log(f);
|
|
|
|
}));
|
|
}
|
|
document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
|
|
|
|
|
|
Promise.all(promises).then((data)=>
|
|
{
|
|
generateHeartRateGraph(data);
|
|
}).catch((error)=>
|
|
{
|
|
console.log(error);
|
|
console.log("Unable to Load Data");
|
|
})
|
|
}
|
|
|
|
document.getElementById('files').addEventListener('change', handleFileSelect, false);
|
|
</script>
|
|
</footer>
|
|
|
|
</html>
|