JavaScript Point-Markers Chart

Use Point Markers in JavaScript

Overview

This example demonstrates how to render custom data-point markers using SciChart.js in a JavaScript application. It showcases a variety of marker types including Ellipse, Square, Triangle, Cross, and a custom image marker using that is loaded asynchronously. The example also illustrates how to handle gaps in the data by setting specific data points to NaN.

Technical Implementation

The chart is initialized asynchronously using the SciChartSurface.create() method, which efficiently loads the required WebAssembly resources for high-performance rendering. Multiple data series are generated with the XyDataSeries class and rendered using the SplineLineRenderableSeries for smooth, interpolated lines. Each data series is enhanced with a unique point marker implemented via classes such as EllipsePointMarker, SquarePointMarker, TrianglePointMarker, CrossPointMarker, and SpritePointMarker. The custom image marker leverages asynchronous image loading using the createImageAsync() function. Additionally, the implementation intentionally introduces a data gap by updating a data point to NaN, demonstrating how SciChart.js handles missing values as explained in the Drawing Gaps in Series documentation.

Features and Capabilities

This example emphasizes high-performance chart rendering using WebGL along with real-time update capabilities and advanced interactivity. Interactive modifiers such as ZoomPanModifier and MouseWheelZoomModifier are integrated to allow smooth zooming and panning. Each renderable series is uniquely styled to clearly differentiate between the various data sets, even when data gaps occur.

Integration and Best Practices

Integrating SciChart.js into a JavaScript application is straightforward. The asynchronous initialization approach, as detailed in the Getting Started with SciChart JS guide and the Including SciChart.js in an HTML Page using CDN tutorial, ensures that all necessary assets are loaded efficiently. By modularizing the chart creation logic and handling asynchronous image loading properly, developers can achieve a maintainable and high-performance charting solution that follows best practices for real-time data visualization.