You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
94 lines
2.3 KiB
94 lines
2.3 KiB
<!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>
|