From 30bf3349519178af8db83bfdc533beeee6ec7ec9 Mon Sep 17 00:00:00 2001
From: sbosse <sbosse@uni-bremen.de>
Date: Mon, 21 Jul 2025 22:53:15 +0200
Subject: [PATCH] Mon 21 Jul 22:43:21 CEST 2025

---
 .../examples/graph2d/15_streaming_data.html   | 122 ++++++++++++++++++
 1 file changed, 122 insertions(+)
 create mode 100644 js/dos/ext/vis/examples/graph2d/15_streaming_data.html
diff --git a/js/dos/ext/vis/examples/graph2d/15_streaming_data.html b/js/dos/ext/vis/examples/graph2d/15_streaming_data.html
new file mode 100644
index 0000000..0eb7cac
--- /dev/null
+++ b/js/dos/ext/vis/examples/graph2d/15_streaming_data.html
@@ -0,0 +1,122 @@
+<!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" />
+<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+<body>
+<h2>Graph2d | Streaming data</h2>
+<p style="max-width: 700px;">
+  This example demonstrates how to apply streaming data input to the Graph2d. The example shows two different ways to let the window move along with the new data, and there are more strategies for that. Note also that it is possible to disable moving and/or zooming the graph by setting options <code>moveable</code> and <code>zoomable</code> false.
+</p>
+
+<p>
+  <label for="strategy">Strategy:</label>
+  <select id="strategy">
+    <option value="continuous" selected>Continuous (CPU intensive)</option>
+    <option value="discrete">Discrete</option>
+    <option value="static">Static</option>
+  </select>
+</p>
+
+<div id="visualization"></div>
+
+<script type="text/javascript">
+  var DELAY = 1000; // delay in ms to add new data points
+
+  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(-30, 'seconds'), // changed so its faster
+    end: vis.moment(),
+    dataAxis: {
+      left: {
+        range: {
+          min:-10, max: 10
+        }
+      }
+    },
+    drawPoints: {
+      style: 'circle' // square, circle
+    },
+    shaded: {
+      orientation: 'bottom' // top, bottom
+    }
+  };
+  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;
+  }
+
+  function renderStep() {
+    // move the window (you can think of different strategies).
+    var now = vis.moment();
+    var range = graph2d.getWindow();
+    var interval = range.end - range.start;
+    switch (strategy.value) {
+      case 'continuous':
+        // continuously move the window
+        graph2d.setWindow(now - interval, now, {animation: false});
+        requestAnimationFrame(renderStep);
+        break;
+
+      case 'discrete':
+        graph2d.setWindow(now - interval, now, {animation: false});
+        setTimeout(renderStep, DELAY);
+        break;
+
+      default: // 'static'
+        // move the window 90% to the left when now is larger than the end of the window
+        if (now > range.end) {
+          graph2d.setWindow(now - 0.1 * interval, now + 0.9 * interval);
+        }
+        setTimeout(renderStep, DELAY);
+        break;
+    }
+  }
+  renderStep();
+
+  /**
+   * Add a new datapoint to the graph
+   */
+  function addDataPoint() {
+    // add a new data point to the dataset
+    var now = vis.moment();
+    dataset.add({
+      x: now,
+      y: y(now / 1000)
+    });
+
+    // remove all data points which are no longer visible
+    var range = graph2d.getWindow();
+    var interval = range.end - range.start;
+    var oldIds = dataset.getIds({
+      filter: function (item) {
+        return item.x < range.start - interval;
+      }
+    });
+    dataset.remove(oldIds);
+
+    setTimeout(addDataPoint, DELAY);
+  }
+  addDataPoint();
+</script>
+</body>
+</html>
\ No newline at end of file
