Created simple web page which prompts user to load a JSON file and it graphs it using visjs.

6 years ago · dcfe199982
--- a/graphing/basicGraph.html
+++ 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>
--- a/graphing/ex.json
+++ 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}]