Realtime JavaScript Chart Performance Demo

Realtime Chart Performance Demo with JavaScript

Overview

This example, “JavaScript Chart Performance Demo”, demonstrates how to create a highly performant real-time chart using plain JavaScript and SciChart.js. The demo continuously appends large batches of data points to a line chart while measuring performance metrics such as frames per second (FPS), all powered by the efficient WebGL rendering capabilities of SciChart.js.

Technical Implementation

The implementation begins by asynchronously initializing a SciChartSurface using the dedicated WebGL canvas via the SciChartSurface.createSingle() method (see Adding Realtime Updates | JavaScript Chart Documentation). Two NumericAxis are created and configured with auto-ranging set to EAutoRange.Always, which is detailed in the Axis Ranging - AutoRange Documentation. Three XyDataSeries objects are instantiated and bound to FastLineRenderableSeries to efficiently render large ranges of data points. A setTimeout loop is used to drive the continuous, real-time data updates, with a RandomWalkGenerator appending 1,000 points every 10 milliseconds. Performance is measured by subscribing to the sciChartSurface.rendered event, which calculates metrics such as FPS and the total number of data points - techniques discussed in the Performance Tips & Tricks Guide.

Features and Capabilities

Real-Time Updates: The demo showcases live data streaming by continuously appending up to millions of data points. This demonstrates how efficiently DataSeries Realtime Updates can be implemented to handle high-frequency updates in JavaScript Charts with SciChart.

Axis Configuration: By using NumericAxis with an auto-range configuration, the chart automatically adjusts its view to new data without manual intervention. Developers interested in further details can review the Axis Ranging - AutoRange Documentation.

Asynchronous Initialization: The use of async/await ensures that the chart is set up efficiently and that resources are properly managed. This practice follows guidelines outlined in the Getting Started with SciChart JS documentation.

Performance Measurement: The rendered.subscribe event is leveraged to compute performance statistics like FPS, enabling developers to gain insights into rendering efficiency. For more on these techniques, see the Performance Tips & Tricks Guide.

Integration and Best Practices

Even though this example is implemented purely in JavaScript, the control patterns—such as starting/stopping real-time updates and cleaning up resources using a destructor function—are applicable to any framework. The chart controls provide methods to start and stop the update loop, and the SciChartSurface.delete() method is called to dispose of WebGL resources efficiently, aligning with the best practices detailed in the Memory Best Practices documentation. This example clearly illustrates how real-time chart updates, efficient data series handling, and performance measurement techniques can be combined in a JavaScript environment using SciChart.js.