Skip to main content

Data Visualization Guide

This guide helps you visualize ECG/PPG data returned by the AIECG API. It provides integration examples and parameter explanations for common charting libraries, and highlights performance considerations for real-time large datasets.

Overview​

  • 📈 ECG visualization: single-lead and 12-lead waveform charts
  • 💓 PPG visualization: multi-channel PPG waveform display
  • 📊 Chart library recommendations: pick the best option for your scenario
  • ⚡ Performance optimization: tips for real-time rendering with large data volumes

ECG visualization​

ECG data format​

ECG data from the API includes:

  • Single-lead: ecgData, ecgSampleRate, adcGain, adcZero
  • 12-lead: ecgSampleRate plus lead arrays (e.g., lead_I, lead_II, lead_V1 … lead_V6)

Charting approach (Chart.js)​

For simple ECG line charts, Chart.js is easy to integrate. Convert samples to a time axis and render as a line series.

Typical steps:

  1. Create a time axis: t = index / samplingRate
  2. Plot ECG samples as a line series
  3. Disable heavy animations when rendering many points

Charting approach (ECharts)​

For interactive charts and zooming, ECharts provides better tooling. You can:

  • Use canvas rendering for performance
  • Use dataset/series to manage multi-lead traces
  • Add tooltips to show timestamp/value

PPG visualization​

PPG waveform display​

PPG visualization typically uses:

  • Amplitude vs time curve
  • Ability to detect pulse peaks and dicrotic features

If you visualize dual-wavelength PPG for SpO2, you can plot:

  • Red channel (660nm)
  • Infrared channel (940nm)
  • Ratio curve R (optional)

Motion and noise considerations​

During exercise, motion artifacts can reduce peak detectability. Recommended mitigations:

  • Accelerometer-assisted filtering (if available)
  • Adaptive filtering and downsampling strategies
  • Multi-sensor fusion where possible

Real-time data stream visualization​

When displaying real-time streams:

  • Use rolling buffers (e.g., keep last N seconds)
  • Auto-scale axes or use fixed ranges
  • Display a signal quality indicator (based on sqGrade if available)
  • Trigger alerts when abnormal quality is detected
  • Simple static charts: Chart.js
  • Interactive charts (zoom/pan, multiple traces): ECharts
  • High-performance real-time (very large datasets): prefer canvas/WebGL-based solutions where supported

FAQ / Common issues​

  • If rendering is slow, reduce point count (downsample) and disable animations.
  • If tooltips feel inaccurate, confirm your time-axis mapping and sampling rate.
  • If waveforms look clipped, check axis range and gain/scaling.

Technical support​

If you need a recommended implementation template, contact the technical support email on the site.