From c8e02245e697200d96fc02075e9c1788c6c8c30a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Henning?= <stu114708@informatik.uni-kiel.de>
Date: Tue, 26 Jul 2016 15:59:58 +0200
Subject: [PATCH] worked on index.html
---
src/main/resources/public/index.html | 58 +++++++++++++++++++---------
1 file changed, 39 insertions(+), 19 deletions(-)
diff --git a/src/main/resources/public/index.html b/src/main/resources/public/index.html
index c0f019c..d95e2cf 100644
--- a/src/main/resources/public/index.html
+++ b/src/main/resources/public/index.html
@@ -16,7 +16,16 @@
<title>KiekPAD</title>
+ <style>
+ body {
+ padding-bottom: 60px;
+ padding-top: 50px;
+ }
+ </style>
+
<script type="text/javascript">
+
+ // TODO TEMP
var MeasurementsCreator = {
lastMeasurements: [2500, 2500, 2500, 2500, 2500],
createNewMeasurement: function(time) {
@@ -37,30 +46,47 @@
}
}
}
+
$(document).ready(function() {
- var visualization = new TeeAdViz(d3.select("#plotcontainer"), {
- width: window.innerWidth-100,
- measurementsHeight: Math.round(0.35*(window.innerWidth-100)),
+ var plotcontainer = $("#plotcontainer");
+
+ var visualization = new TeeAdViz(d3.selectAll(plotcontainer.toArray()), {
+ width: plotcontainer.width(),
+ measurementsHeight: Math.round(0.35*(plotcontainer.width())),
+ measurementsAxisLabel: "Response Time in ns",
predictionVisibility: true,
anomalyscoresVisibility: true,
thresholds: [-0.2, 0.2]
});
+
visualization.setMeasurements([]);
+
+ var latestMeasurementTime = 0;
+ function requestNewData() {
+ $.ajax({
+ url: "http://localhost:8080/measurements",
+ method: "GET",
+ data: { after: latestMeasurementTime },
+ dataType: "json",
+ crossDomain: true, //TODO temp
+ success: function(data) {
+ visualization.addMeasurements(data);
+ }
+ });
+ }
+
+ setInterval(requestNewData, 1000);
+
+
+ // TODO TEMP
function addNewData() {
visualization.addMeasurements([MeasurementsCreator.createNewMeasurement(new Date().getTime())]);
setTimeout(addNewData, Math.random() * (500 - 100) + 100);
}
addNewData();
- $('#file').change(function(evt) {
- var file = evt.target.files[0];
- var reader = new FileReader();
- reader.onload = function(e) {
- var dataSets = $.parseJSON(e.target.result);
- visualization.setMeasurements(dataSets);
- };
- reader.readAsText(file);
- });
+
});
+
</script>
@@ -90,13 +116,7 @@
<div class="container">
- <div class="row">
-
- <div class="col-sm-12 ">
-
- <div id="plotcontainer"></div>
-
- </div>
+ <div id="plotcontainer"></div>
</div> <!-- /container -->
--
GitLab