Real-time Updates (Live Ticker)

Overview

Real-time feeds require appending new tick data or updating the last incomplete candle as price ticks arrive. The Backtestx charting library handles these updates efficiently using a high-frequency canvas repaint loop.

The Update API

To push updates, use the update method on your series instance. If the timestamp of the new bar matches the last bar, the last bar is updated; otherwise, a new bar is appended:

// Update series data with a tick payload
series.update({
  time: 1781100000,
  open: 67250.00,
  high: 67450.00,
  low: 67210.00,
  close: 67380.00,
  volume: 45.2
});

Simulated Feed Example

Below is a snippet demonstrating how to simulate live market price updates using standard JavaScript intervals:

let lastBar = {
  time: Math.floor(Date.now() / 1000),
  open: 100.0,
  high: 100.0,
  low: 100.0,
  close: 100.0
};

setInterval(() => {
  const change = (Math.random() - 0.5) * 2;
  const nextPrice = lastBar.close + change;
  
  lastBar.close = nextPrice;
  lastBar.high = Math.max(lastBar.high, nextPrice);
  lastBar.low = Math.min(lastBar.low, nextPrice);
  
  // Update the active candle
  candleSeries.update(lastBar);
}, 1000);

Performance Best Practices

• Batch Updates: Group multiple updates inside single frames to save GPU rendering cycles.
• Timestamp Alignment: Ensure that updates feed chronological Unix timestamps matching the data resolution.