You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
92 lines
2.5 KiB
92 lines
2.5 KiB
<!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>
|