var TICKINTERVAL = 1000
var XAXISRANGE = 29 * TICKINTERVAL
var lastX = new Date().getTime() - XAXISRANGE
var lastY = 50
var data = []
function nextValue() {
lastY = Math.max(5, Math.min(95, lastY + (Math.random() - 0.5) * 20))
return Math.round(lastY)
}
while (data.length < 30) {
data.push({ x: lastX, y: nextValue() })
lastX += TICKINTERVAL
}
var options = {
series: [
{
name: 'Signal',
data: data.slice(),
},
],
chart: {
id: 'realtime-streaming',
height: 350,
type: 'line',
streaming: {
enabled: true,
},
animations: {
dynamicAnimation: {
speed: 1000,
},
},
toolbar: {
show: false,
},
zoom: {
enabled: false,
},
},
dataLabels: {
enabled: false,
},
stroke: {
curve: 'smooth',
},
title: {
text: 'Streaming (bounded memory + linear scroll)',
align: 'left',
},
markers: {
size: 0,
},
xaxis: {
type: 'datetime',
range: XAXISRANGE,
},
yaxis: {
min: 0,
max: 100,
},
legend: {
show: false,
},
}
var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()
var intervalRuns = 0
var interval = window.setInterval(function () {
intervalRuns++
lastX += TICKINTERVAL
chart.appendData([
{
data: [{ x: lastX, y: nextValue() }],
},
])
if (intervalRuns === 2 && window.isATest === true) {
clearInterval(interval)
}
}, TICKINTERVAL)