From 84b8a865383c823668308f4e2a1509fc9600d568 Mon Sep 17 00:00:00 2001 From: jos Date: Wed, 10 Sep 2014 12:19:10 +0200 Subject: [PATCH] Some improvements in streaming data example --- examples/graph2d/15_streaming_data.html | 40 ++++++++++++++----------- 1 file changed, 22 insertions(+), 18 deletions(-) diff --git a/examples/graph2d/15_streaming_data.html b/examples/graph2d/15_streaming_data.html index 4d3b6b89..587d6848 100644 --- a/examples/graph2d/15_streaming_data.html +++ b/examples/graph2d/15_streaming_data.html @@ -17,8 +17,8 @@

Graph2d | Streaming data

-

- This example demonstrates how to apply streaming data input to the Graph2d.
+

+ 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 moveable and zoomable false.

@@ -48,19 +48,17 @@ 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; + /** + * Append a new data point to the graph + * @param {Date} x + * @param {Number} y + */ + function add (x, y) { + // add a new data point to the dataset + dataset.add({x: x, y: y}); // 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) { @@ -70,21 +68,27 @@ break; default: // 'discrete' - // move the window 90% to the left when now is larger than the visible end + // 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); } break; } - // remove all data points older than 1 minute - var min = now.add(-60, 'seconds'); + // remove all data points which are no longer visible var oldIds = dataset.getIds({ filter: function (item) { - return item.x < min; + return item.x < range.start; } }); - if (oldIds.length > 0) dataset.remove(oldIds); + dataset.remove(oldIds); + } + + var delay = 500; // delay in ms + function next() { + // add a new data point + var now = vis.moment(); + add(now, y(now / 1000)); setTimeout(next, delay); }