Simple Chart using Builder API

Simple Chart with JavaScript

Overview

This example demonstrates how to construct a high-performance chart using SciChart.js with a declarative JSON configuration approach via the Builder API. By leveraging a well-defined JSON object, developers can quickly set up numeric axes, a smoothed spline line series, and custom SVG text annotations while focusing directly on JavaScript integration. For more information on using the Builder API, see the Intro to the Builder API.

Technical Implementation

The chart is created using the Builder API in a straightforward manner by calling the function chartBuilder.build2DChart and providing a JSON configuration. This configuration specifies key details such as:

• Axes Configuration: Numeric x and y axes are set with padding using NumberRange, ensuring that data points are not clipped. Refer to techniques in axis configuration in the Chart Styling - Margin and Padding documentation.

• Series and Animations: A SplineLineSeries is defined with custom properties including stroke thickness, an interpolation factor for line smoothing, and a scale animation (500ms duration) that enhances visual engagement. Explore details on series animations in the Class ScaleAnimation documentation.

• Annotations: Two SVG text annotations are added to the chart, utilizing relative coordinate modes and configurable anchor points for precise placement. This method of annotation customization is further explained in the Tutorial 06 - Adding Annotations guide.

Features and Capabilities

The example showcases several advanced features:

• Declarative Charting: Using JSON configuration streamlines the process of chart creation so that each element (axes, series, and annotations) is easily modifiable and maintainable.

• Smooth Series Rendering: The SplineLineSeries with interpolation points produces a visually appealing smoothed line effect which can be crucial for data visualization tasks.

• Dynamic Animations: Integrated scale animations and stroke customization contribute to an engaging, real-time update experience when data changes.

• Optimized Performance: Built upon WebGL, SciChart.js leverages hardware-accelerated rendering, ensuring that charts update rapidly even with complex visual elements.

Integration and Best Practices

In this pure JavaScript setup, the integration strategy is focused on asynchronous initialization and proper lifecycle management. The chart is created by invoking a function that returns a cleanup method, ensuring that any allocated resources are properly disposed of when the chart is no longer needed. For guidance on integrating SciChart.js into an HTML environment, consult the Tutorial 01 - Including SciChart.js in an HTML Page using CDN. This example emphasizes best practices by ensuring that the SciChartSurface is deleted appropriately to prevent memory leaks, a crucial consideration in high-performance charting scenarios.