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