1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63
| <script type="text/javascript">
var DELAY = 1000; // delay in ms to add new data points
var strategy = document.getElementById('strategy');
// create a graph2d with a (currently empty) dataset
var container = document.getElementById('visualization');
var dataset = new vis.DataSet();
var options = {
start: vis.moment().add(-30, 'seconds'),
end: vis.moment(),
dataAxis: {
left: {
range: {
min:68, max: 75
}
}
},
drawPoints: {
style: 'circle'
},
shaded: {
orientation: 'bottom'
}
};
var graph2d = new vis.Graph2d(container, dataset, options);
function renderStep() {
// move the window (you can think of different strategies).
var now = vis.moment();
var range = graph2d.getWindow();
var interval = range.end - range.start;
}
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: '{{ message.returnValue|replaceForGraph }}'
});
// remove all data points which are no longer visible
var range = graph2d.getWindow();
var interval = range.end - range.start;
var oldIds = dataset.getIds({
filter: function (item) {
return item.x < range.start - interval;
}
});
dataset.remove(oldIds);
setTimeout(addDataPoint, DELAY);
}
addDataPoint();
</script> |
Partager