Realtime in JavaScript

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)