Client/Server Websocket Data Streaming

Websocket Big Data Example - JavaScript

Overview

This example demonstrates how to create a high performance real-time chart using SciChart.js integrated with websocket streaming data in a JavaScript environment. It showcases efficient handling and visualization of massive datasets by employing data buffering and a sliding window pattern to update the chart dynamically.

Technical Implementation

The chart is initialized using the native SciChart.js API via the call to SciChartSurface.create, which sets up the rendering surface with WebGL acceleration. Data management is handled by appending new data points using methods like appendRange() and removing older data using removeRange(), thereby implementing a sliding window for continuous updates. This technique could be further improved by using fifoCapacity - where XyDataSeries are implemented with a First-In-First-Out (FIFO) circular buffer, for automatic discarding of old data. For more information on these techniques, refer to the Append, Insert, Update, Remove documentation and the Performance Tips & Tricks.

Features and Capabilities

The example supports multiple chart series types—including FastLineRenderableSeries, FastColumnRenderableSeries, StackedMountainRenderableSeries, FastBandRenderableSeries, XyScatterRenderableSeries, and FastCandlestickRenderableSeries that can be dynamically selected. It also implements logarithmic scaling through custom slider components built with Math.log10. Real-time data updates are achieved using socket.io, which streams data from a backend websocket server. Additionally, performance metrics such as load time and render time are captured using preRender and rendered event subscriptions, enabling calculation of the maximum frames per second (FPS).

Integration and Best Practices

Built entirely with JavaScript, this example offers an in-depth look at integrating real-time websocket data with SciChart.js without any additional frameworks. Developers interested in leveraging similar techniques can start with the Getting Started with SciChart JS guide. For robust websocket handling—including reconnection strategies and buffer management—practices are illustrated in discussions such as How to reconnect to websocket after close connection.

This example stands as a comprehensive resource for integrating high performance real-time charting with scattered and rapid data updates in a lightweight, framework-free JavaScript environment.