Trendline, Moving Average and Ratio Filters

Trendline, Moving Average and Ratio Filters in JavaScript

Overview

This example demonstrates how to integrate SciChart.js with a JavaScript application to create a high-performance financial chart that applies dynamic data transformations. It showcases advanced technical analysis filters including Moving Average, Linear Trendline and Ratio filters, while also configuring dual y-axes for displaying both the original and transformed data.

Technical Implementation

The chart is initialized asynchronously using SciChart.js’s native asynchronous API, where a WebAssembly context is created by calling SciChartSurface.create and loading Wasm. Data is generated using a random walk generator and then processed through several filters, including two distinct Moving Average filters with different lengths, an offset and scale filter, a Linear Trendline filter, and finally, a Ratio filter that computes the ratio between the original data series and its transformed version. The filter chaining demonstrates how multiple data transformations can be applied step-by-step as described in the Transforming Data with Filters documentation.

Features and Capabilities

The implementation includes several advanced features such as:

• Dual y-axis configuration to clearly distinguish between original data and ratio values, following best practices outlined in the Tutorial 08 - Adding Multiple Axis guide.
• Interactive chart modifiers like MouseWheelZoomModifier, ZoomPanModifier, ZoomExtentsModifier and a LegendModifier that enhance user interactivity. More details on these can be found in the MouseWheelZoomModifier Documentation.
• Annotations using the NativeTextAnnotation to overlay descriptive text with relative coordinates, adding additional context to the chart.

Integration and Best Practices

The example demonstrates best practices for integrating SciChart.js into a JavaScript project. Developers can follow the step-by-step asynchronous initialization process as detailed in the Getting Started with SciChart JS guide. Furthermore, resource cleanup is handled through a destructor function that properly disposes of chart objects, ensuring efficient memory management as recommended in the Memory Best Practices | JavaScript Chart Documentation. This implementation not only highlights the usage of dynamic filter chaining and dual-axis configuration, but also shows how to optimize performance when working with WebAssembly-powered charts.