var RealTimeData = function(layers) {
this.layers = layers;
this.timestamp = ((new Date()).getTime() / 1000)|0;
};
RealTimeData.prototype.rand = function() {
return parseInt(Math.random() * 100) + 50;
};
RealTimeData.prototype.history = function(entries) {
if (typeof(entries) != 'number' || !entries) {
entries = 1;
}
var history = [];
for (var k = 0; k < this.layers; k++) {
history.push({ values: [] });
}
for (var i = 0; i < entries; i++) {
for (var j = 0; j < this.layers; j++) {
history[j].values.push({time: this.timestamp, y: this.rand()});
}
this.timestamp++;
}
return history;
};
RealTimeData.prototype.next = function() {
var entry = [];
for (var i = 0; i < this.layers; i++) {
entry.push({ time: this.timestamp, y: this.rand() });
}
this.timestamp++;
return entry;
}
window.RealTimeData = RealTimeData;
$(function(){
var data = new RealTimeData(2);
var chart = $('#lineChart')
.epoch({
type: 'time.line',
data: data.history(),
axes: ['left', 'bottom', 'right']
});
window.setInterval(function() { var x= data.next(); chart.push(x); }, 1000);
chart.push(data.next());
});
<div id="lineChart" class="epoch" style="width: 100%; height: 100px;border:solid 1px #C0C0C0;"></div>
External resources loaded into this fiddle: