|
|
- <!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>
|
