JavaScript Band Chart

Band Series Chart in JavaScript

Overview

This example demonstrates how to create a high-performance band series chart using SciChart.js in a JavaScript environment. It visualizes high and low values using two band series, each with distinct visual styles and smooth animations.

Technical Implementation

The chart is initialized asynchronously with SciChartSurface.create, which efficiently sets up the WebGL context. The implementation adds numeric X and Y axes and prepares three arrays for X, Y, and Y1 values. These values are fed into the XyyDataSeries (see XyyDataSeries documentation) to supply the data for each band. Two FastBandRenderableSeries are then created. The first series applies solid color fills with transparency, while the second series demonstrates the use of linear gradient fills defined via GradientParams. Both series incorporate smooth transitioning effects using SweepAnimation (SweepAnimation documentation).

Features and Capabilities

This example highlights several advanced features: interactive modifiers such as ZoomExtentsModifier, ZoomPanModifier, and MouseWheelZoomModifier enhance user experience by providing intuitive zooming and panning (refer to the interactive modifier guide). Additionally, the implementation demonstrates robust handling of real-time data updates and performance optimizations through efficient WebGL rendering.

Integration and Best Practices

Using a pure JavaScript approach, the example directly calls an asynchronous function that both creates the chart and returns a destructor for proper resource management. Developers can cleanly dispose of the chart by invoking the delete method on the SciChartSurface, as described in the SciChartSurface API documentation. This methodical approach ensures optimal performance and memory usage, making it a strong foundation for integrating SciChart.js into broader JavaScript applications.