Browse Source

Extended example 15

v3_develop
jos 10 years ago
parent
commit
f67557f748
2 changed files with 38 additions and 22 deletions
  1. +1
    -1
      examples/graph2d/12_customRange.html
  2. +37
    -21
      examples/graph2d/15_streaming_data.html

+ 1
- 1
examples/graph2d/12_customRange.html View File

@ -29,7 +29,7 @@ var options = {
right: { right: {
min:-5 min:-5
} }
},
}
} }
}; };
</pre> </pre>

+ 37
- 21
examples/graph2d/15_streaming_data.html View File

@ -24,14 +24,17 @@
<p> <p>
<label for="strategy">Strategy:</label> <label for="strategy">Strategy:</label>
<select id="strategy"> <select id="strategy">
<option value="continuous" selected>Continuous</option>
<option value="continuous" selected>Continuous (CPU intensive)</option>
<option value="discrete">Discrete</option> <option value="discrete">Discrete</option>
<option value="static">Static</option>
</select> </select>
</p> </p>
<div id="visualization"></div> <div id="visualization"></div>
<script type="text/javascript"> <script type="text/javascript">
var DELAY = 1000; // delay in ms to add new data points
var strategy = document.getElementById('strategy'); var strategy = document.getElementById('strategy');
// create a graph2d with an (currently empty) dataset // create a graph2d with an (currently empty) dataset
@ -39,7 +42,14 @@
var dataset = new vis.DataSet(); var dataset = new vis.DataSet();
var options = { var options = {
start: vis.moment().add(-60, 'seconds'), start: vis.moment().add(-60, 'seconds'),
end: vis.moment()
end: vis.moment(),
dataAxis: {
customRange: {
left: {
min:-10, max: 10
}
}
}
}; };
var graph2d = new vis.Graph2d(container, dataset, options); var graph2d = new vis.Graph2d(container, dataset, options);
@ -48,15 +58,7 @@
return (Math.sin(x / 2) + Math.cos(x / 4)) * 5; 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});
function renderStep() {
// move the window (you can think of different strategies). // move the window (you can think of different strategies).
var now = vis.moment(); var now = vis.moment();
var range = graph2d.getWindow(); var range = graph2d.getWindow();
@ -65,34 +67,48 @@
case 'continuous': case 'continuous':
// continuously move the window // continuously move the window
graph2d.setWindow(now - interval, now, {animate: false}); graph2d.setWindow(now - interval, now, {animate: false});
requestAnimationFrame(renderStep);
break;
case 'discrete':
graph2d.setWindow(now - interval, now, {animate: false});
setTimeout(renderStep, DELAY);
break; break;
default: // 'discrete'
default: // 'static'
// move the window 90% to the left when now is larger than the end of the window // move the window 90% to the left when now is larger than the end of the window
if (now > range.end) { if (now > range.end) {
graph2d.setWindow(now - 0.1 * interval, now + 0.9 * interval); graph2d.setWindow(now - 0.1 * interval, now + 0.9 * interval);
} }
setTimeout(renderStep, DELAY);
break; 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 // remove all data points which are no longer visible
var range = graph2d.getWindow();
var oldIds = dataset.getIds({ var oldIds = dataset.getIds({
filter: function (item) { filter: function (item) {
return item.x < range.start; return item.x < range.start;
} }
}); });
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);
setTimeout(addDataPoint, DELAY);
} }
next();
addDataPoint();
</script> </script>
</body> </body>
</html> </html>

Loading…
Cancel
Save