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