Custom Filters

Custom Filters - JavaScript

Overview

This example demonstrates advanced custom filters within the SciChart.js library using JavaScript. The implementation showcases real-time data transformations by applying a Gaussian randomization filter and a bespoke aggregation filter that extends the XyFilterBase class to compute frequency distributions.

Technical Implementation

The custom filtering mechanism is implemented by subclassing XyFilterBase to create an aggregation filter, and by applying a transformation function via XyCustomFilter that utilizes a Gaussian random function. Real-time updates are executed using a timer-based approach with setTimeout, as detailed in the Adding Realtime Updates guide. The example also leverages WebAssembly acceleration for high-frequency data processing, a key aspect for performance optimization as described in the Performance Tips & Tricks.

Features and Capabilities

Key features include real-time updates with efficient batch data appending and advanced data transformation techniques. The Gaussian randomization modifies the incoming data series before it is aggregated, while the custom aggregation filter bins the data to produce a frequency distribution. This dual filtering approach enables developers to visualize both raw and processed data concurrently, ensuring a high level of interactivity and responsiveness.

Integration and Best Practices

Focusing solely on JavaScript, the example adheres to robust object-oriented design patterns by extending base filtering classes without relying on framework-specific hooks or builder APIs. The implementation follows best practices outlined in the SciChart.js JavaScript Charts User Manual to build high-performance, real-time charting applications. Developers are encouraged to explore these techniques further to optimize large-scale data visualization solutions.