jos
11 years ago
2 changed files with 95 additions and 0 deletions
Unified View
Diff Options
+ 94
- 0
examples/graph2d/15_streaming_data.html
View File
| @ -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> | |||||