From dcfe1999826d69f9011848d3c6758be33c2218ab Mon Sep 17 00:00:00 2001
From: jrtechs <jeffery@jrtechs.net>
Date: Sun, 20 Jan 2019 20:06:45 -0500
Subject: [PATCH] Created simple web page which prompts user to load a JSON
 file and it graphs it using visjs.

---
 graphing/basicGraph.html | 92 ++++++++++++++++++++++++++++++++++++++++
 graphing/ex.json         |  1 +
 2 files changed, 93 insertions(+)
 create mode 100644 graphing/basicGraph.html
 create mode 100644 graphing/ex.json
diff --git a/graphing/basicGraph.html b/graphing/basicGraph.html
new file mode 100644
index 0000000..e75c3fc
--- /dev/null
+++ b/graphing/basicGraph.html
@@ -0,0 +1,92 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>Graph2d | Performance</title>
+
+    <style>
+        body, html {
+            font-family: arial, sans-serif;
+            font-size: 11pt;
+        }
+        span.label {
+            width:150px;
+            display:inline-block;
+        }
+    </style>
+
+    <!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
+
+	<script src="https://code.jquery.com/jquery-3.3.1.min.js"
+	  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
+	  crossorigin="anonymous">
+	</script>
+
+    <script src="./dist/vis.js"></script>
+    <link href="./dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+<br />
+
+Click the button then choose a file to graph.
+<button onclick="openFile(dispFile)">Open a file</button>
+<pre id="contents"></pre>
+
+
+
+<div id="visualization">
+<script type="text/javascript">
+
+
+    function dispFile(contents)
+    {
+        console.log(contents);
+        console.log(typeof contents);
+        var container = document.getElementById('visualization');
+
+        var items = JSON.parse(contents);
+
+        var dataset = new vis.DataSet(items);
+        var options = {};
+        var graph2d = new vis.Graph2d(container, dataset, options);
+    }
+
+    function clickElem(elem)
+    {
+        // Thx user1601638 on Stack Overflow (6/6/2018 - https://stackoverflow.com/questions/13405129/javascript-create-and-save-file )
+        var eventMouse = document.createEvent("MouseEvents");
+        eventMouse.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
+        elem.dispatchEvent(eventMouse);
+    }
+
+    function openFile(func)
+    {
+        readFile = function(e)
+        {
+            var file = e.target.files[0];
+            if (!file)
+            {
+                return;
+            }
+            var reader = new FileReader();
+            reader.onload = function(e)
+            {
+                var contents = e.target.result;
+                fileInput.func(contents);
+                document.body.removeChild(fileInput);
+            }
+            reader.readAsText(file);
+        }
+        fileInput = document.createElement("input");
+        fileInput.type='file';
+        fileInput.style.display='none';
+        fileInput.onchange=readFile;
+        fileInput.func=func;
+        document.body.appendChild(fileInput);
+        clickElem(fileInput);
+    }
+</script>
+</div>
+
+</body>
+</html>
diff --git a/graphing/ex.json b/graphing/ex.json
new file mode 100644
index 0000000..6615c8e
--- /dev/null
+++ b/graphing/ex.json
@@ -0,0 +1 @@
+[{"x": "2014-06-1", "y": -6},{"x": "2014-06-11", "y": 0},{"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}]
