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.
98 lines
2.7 KiB
98 lines
2.7 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 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</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;
|
|
}
|
|
|
|
/**
|
|
* 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) {
|
|
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 end of the window
|
|
if (now > range.end) {
|
|
graph2d.setWindow(now - 0.1 * interval, now + 0.9 * interval);
|
|
}
|
|
break;
|
|
}
|
|
|
|
// remove all data points which are no longer visible
|
|
var oldIds = dataset.getIds({
|
|
filter: function (item) {
|
|
return item.x < range.start;
|
|
}
|
|
});
|
|
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);
|
|
}
|
|
next();
|
|
</script>
|
|
</body>
|
|
</html>
|