some basic code

src/main/resources/public/index.html

@@ -7,13 +7,60 @@
 
     <link media="all" type="text/css" rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
     <link media="all" type="text/css" rel="stylesheet" href="vendor/canvasplot/canvasplot.css">
-    <script src="vendor/jquery/jquery-3.1.0.slim.min"></script>
+    <script src="vendor/jquery/jquery-3.1.0.slim.min.js"></script>
     <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
     <script src="vendor/d3/d3.min.js" charset="utf-8"></script>
     <script src="vendor/canvasplot/canvasplot.js" charset="utf-8"></script>
     <script src="vendor/canvasplot-indicator-ts/canvasplot-indicator-ts.js" charset="utf-8"></script>
 
-    <title>Fixed Top Navbar Example for Bootstrap</title>
+    <title>KiekPAD</title>
+
+    <script type="text/javascript">
+    var MeasurementsCreator = {
+      lastMeasurements: [2500, 2500, 2500, 2500, 2500],
+      createNewMeasurement: function(time) {
+        this.lastMeasurements.shift();
+        var lastMeasurement = this.lastMeasurements[this.lastMeasurements.length-1];
+        var measurement =  Math.max(0, lastMeasurement + 100*2 * (Math.random() - 0.5));
+        this.lastMeasurements.push(measurement);
+        if (Math.random() >= 0.9) {
+          measurement = Math.max(0, lastMeasurement + 1000*2 * (Math.random() - 0.5));
+        }
+        var prediction = this.lastMeasurements.reduce(function(a, b) { return a + b; }) / this.lastMeasurements.length;
+        var anomalyscore = (measurement - prediction) / prediction;
+        return {
+          "time": time,
+          "measurement": measurement,
+          "prediction": prediction,
+          "anomalyscore": anomalyscore
+        }
+      }
+    }
+    $(document).ready(function() {
+    	var visualization = new TeeAdViz(d3.select("#plotcontainer"), {
+        width: window.innerWidth-100,
+        measurementsHeight: Math.round(0.35*(window.innerWidth-100)),
+        predictionVisibility: true,
+        anomalyscoresVisibility: true,
+        thresholds: [-0.2, 0.2]
+      });
+      visualization.setMeasurements([]);
+      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>
 
 
   </head>
@@ -30,13 +77,11 @@
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
           </button>
-          <a class="navbar-brand" href="#">Project name</a>
+          <a class="navbar-brand" href="#">KiekPAD</a>
         </div>
         <div id="navbar" class="navbar-collapse collapse">
           <ul class="nav navbar-nav">
-            <li class="active"><a href="#">Home</a></li>
-            <li><a href="#about">About</a></li>
-            <li><a href="#contact">Contact</a></li>
+            <li class="active"><a href="#">KiekPAD</a></li>
           </ul>
         </div><!--/.nav-collapse -->
       </div>
@@ -47,7 +92,9 @@
       <div class="row">
 
         <div class="col-sm-12 ">
-          #CONTENT#
+
+          <div id="plotcontainer"></div>
+
         </div>
 
     </div> <!-- /container -->