JavaScript Scatter Chart

Scatter Chart with JavaScript

Overview

This example demonstrates a high-performance Scatter Chart built using SciChart.js in a JavaScript environment. It showcases the creation of a chart with two distinct data series that use custom point markers and smooth animated transitions to visually differentiate and highlight data points.

Technical Implementation

The chart is initialized asynchronously by invoking the SciChart.js API via the WASM context, ensuring optimal rendering performance. The example creates NumericAxis, generates dynamic data using array mapping, and sets up two scatter series with XyScatterRenderableSeries with custom markers (Ellipse and Triangle) using classes like EllipsePointMarker and TrianglePointMarker. For more details on asynchronous initialization, refer to the Tutorial 01 - Including SciChart.js in an HTML Page using CDN. Additionally, the integration of the WebAssembly context is explained in the Creating a new SciChartSurface and loading Wasm documentation. Smooth transitions are achieved via the SweepAnimation class, ensuring the animations are both visually appealing and performant.

Features and Capabilities

The example highlights several advanced features including the use of interactive modifiers such as ZoomPanModifier, ZoomExtentsModifier, and MouseWheelZoomModifier to facilitate user-friendly data exploration. Custom point markers are implemented as per the guidelines found in Drawing PointMarkers on Series, allowing for differentiated visual styling of data series. The efficient setup of dynamic data series ensures that the chart remains responsive and adaptable to real-time data updates.

Integration and Best Practices

Integration with the DOM is handled directly in JavaScript, where the SciChart surface is created on a specified root element and resource cleanup is managed via a destructor function, following the best practices outlined in Memory Best Practices. Developers are encouraged to leverage these techniques to ensure robust performance and efficient memory management while working with high-performance charting libraries. The example serves as a guide for utilizing SciChart.js without any additional frameworks, demonstrating how to achieve high performance and interactivity using native JavaScript methods.