Realtime Percentage Change using Filter

Percentage Change Example in JavaScript

Overview

This example demonstrates how to transform raw data into a real-time percentage change chart using SciChart.js with JavaScript. It converts random walk data into percentage-based visualizations and offers dynamic interactivity with high performance.

Technical Implementation

The implementation generates two random walk data series that are transformed using the XyScaleOffsetFilter to calculate percentage changes. By subscribing to the x-axis visible range changes, the chart dynamically adjusts the filter scale in real time, as detailed in the Adding Realtime Updates documentation. Furthermore, a custom series extending the fast line renderable series is implemented to override tooltip behavior, providing precise display of original values—techniques similar to those covered in Tutorial 07 - Adding Tooltips and Legends.

Features and Capabilities

The example incorporates real-time data transformation and interactive features such as zooming and panning using modifiers like the ZoomPanModifier. It also provides a toggle mechanism to switch between the original data and its percentage change view, ensuring an engaging and informative user experience. Data simulation is achieved via the RandomWalkGenerator, echoing strategies used in the Realtime JavaScript Chart Performance Demo.

Integration and Best Practices

Focusing on JavaScript, the example emphasizes clean integration with SciChart.js by adhering to event-driven update patterns and performance optimization techniques. By limiting updates to essential parameters and leveraging efficient WebGL rendering, the implementation serves as a robust template for developers aiming to build interactive, high-performance charts with SciChart.js.