From e886822c0d2ac8ca6c376cf7a4bec50706b98f44 Mon Sep 17 00:00:00 2001
From: jos <wjosdejong@gmail.com>
Date: Wed, 10 Sep 2014 11:58:12 +0200
Subject: [PATCH] Added example 15_streaming_data.html

---
 examples/graph2d/15_streaming_data.html | 94 +++++++++++++++++++++++++
 examples/graph2d/index.html             |  1 +
 2 files changed, 95 insertions(+)
 create mode 100644 examples/graph2d/15_streaming_data.html
diff --git a/examples/graph2d/15_streaming_data.html b/examples/graph2d/15_streaming_data.html
new file mode 100644
index 00000000..4d3b6b89
--- /dev/null
+++ b/examples/graph2d/15_streaming_data.html
@@ -0,0 +1,94 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+  <meta content="utf-8" http-equiv="encoding">
+  <title>Graph2d | Streaming data</title>
+
+  <style type="text/css">
+    body, html, select {
+      font: 10pt sans-serif;
+    }
+  </style>
+
+  <script src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+<h2>Graph2d | Streaming data</h2>
+<p>
+  This example demonstrates how to apply streaming data input to the Graph2d.<br>
+</p>
+
+<p>
+  <label for="strategy">Strategy:</label>
+  <select id="strategy">
+    <option value="continuous" selected>Continuous</option>
+    <option value="discrete">Discrete</option>
+  </select>
+</p>
+
+<div id="visualization"></div>
+
+<script type="text/javascript">
+  var strategy = document.getElementById('strategy');
+
+  // create a graph2d with an (currently empty) dataset
+  var container = document.getElementById('visualization');
+  var dataset = new vis.DataSet();
+  var options = {
+    start: vis.moment().add(-60, 'seconds'),
+    end: vis.moment()
+  };
+  var graph2d = new vis.Graph2d(container, dataset, options);
+
+  // a function to generate data points
+  function y(x) {
+    return (Math.sin(x / 2) + Math.cos(x / 4)) * 5;
+  }
+
+  var delay = 500; // delay in ms
+  var x = 0;
+  function next() {
+    var now = vis.moment();
+
+    // add a new data point to the data
+    dataset.add({
+      x: now,
+      y: y(now / 1000)
+    });
+    x += 0.1;
+
+    // move the window (you can think of different strategies).
+    var range = graph2d.getWindow();
+    var interval = range.end - range.start;
+    switch (strategy.value) {
+      case 'continuous':
+        // continuously move the window
+        graph2d.setWindow(now - interval, now, {animate: false});
+        break;
+
+      default: // 'discrete'
+        // move the window 90% to the left when now is larger than the visible end
+        if (now > range.end) {
+          graph2d.setWindow(now - 0.1 * interval, now + 0.9 * interval);
+        }
+        break;
+    }
+
+    // remove all data points older than 1 minute
+    var min = now.add(-60, 'seconds');
+    var oldIds = dataset.getIds({
+      filter: function (item) {
+        return item.x < min;
+      }
+    });
+    if (oldIds.length > 0) dataset.remove(oldIds);
+
+    setTimeout(next, delay);
+  }
+  next();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/examples/graph2d/index.html b/examples/graph2d/index.html
index ca5dfe0a..93e7c9bd 100644
--- a/examples/graph2d/index.html
+++ b/examples/graph2d/index.html
@@ -21,6 +21,7 @@
   <p><a href="12_customRange.html">12_customRange.html</a></p>
   <p><a href="13_localization.html">13_localization.html</a></p>
   <p><a href="14_toggleGroups.html">14_toggleGroups.html</a></p>
+  <p><a href="15_streaming_data.html">15_streaming_data.html</a></p>
 
 </div>
 </body>
