JavaScript Style Animation

Style Animation - JavaScript

Overview

This example, "Style Animation", demonstrates how to implement dynamic style transition animations using SciChart.js with JavaScript. It focuses on animating both the data and visual properties of a band series to provide high-performance, real-time updates.

Technical Implementation

The implementation begins with asynchronous initialization of the SciChartSurface using a WebAssembly context, as detailed in the Creating a new SciChartSurface and loading Wasm guide. Numeric axes are set up with custom NumberRange values, and data is generated using trigonometric functions in a standard JavaScript loop. A FastBandRenderableSeries is then created with an XyyDataSeries, and the style animation is executed through the runAnimation method of the BandAnimation class. This process smoothly transitions properties such as stroke, fill, and stroke thickness over a 1000ms duration, aligning with the techniques described in the Style Transition Animations documentation.

Features and Capabilities

Key features of this example include real-time updates of both chart data and styles, interactive enhancements such as ZoomExtentsModifier, ZoomPanModifier, and MouseWheelZoomModifier modifiers, and efficient memory management by registering disposable data series via addDeletable in SciChartSurface. The configuration of the band series is aligned with the best practices highlighted within the The Band Series type guide.

Integration and Best Practices

By relying solely on JavaScript, this example demonstrates how to integrate SciChart.js efficiently without additional frameworks or helpers. Developers are encouraged to follow the asynchronous initialization methods using WebAssembly for optimal performance and to use built-in interactive modifiers to boost user interactivity. Moreover, the example’s approach to managing temporary data via SciChartSurface.addDeletable() reflects recommended Memory Best Practices in SciChart.js. This ensures that resources are managed effectively even during intensive animation operations.