JavaScript Text Chart

Text Series Chart - JavaScript

Overview

This example demonstrates how to create a high-performance text chart using SciChart.js in a JavaScript application. The chart visualizes AI-analyzed tweet data, showing the number of tweets on a logarithmic x-axis and the average sentiment on a numeric y-axis, rendered as text.

Technical Implementation

The chart is initialized asynchronously using the SciChartSurface.create() method which sets up a WebAssembly context for optimal performance. For more details on this asynchronous initialization, refer to the Getting Started with SciChart JS guide and the Creating a new SciChartSurface and loading Wasm documentation. The x-axis is configured as a LogarithmicAxis (see The Logarithmic Axis) while the y-axis is set up with a NumericAxis, ensuring proper display ranges. Data is fetched asynchronously via a REST API call and bound to an XyTextDataSeries, which is then rendered using FastTextRenderableSeries as explained in The Text Series documentation.

Features and Capabilities

This implementation includes advanced interactive features such as zooming and panning. The chart modifiers (ZoomPanModifier, ZoomExtentsModifier, and MouseWheelZoomModifier) enable dynamic user interactions and can be reviewed in further detail in the Tutorial 03 - Adding Zooming, Panning Behavior guide. Additionally, custom theming is applied using an appTheme, contributing to a polished and consistent visual appearance.

Integration and Best Practices

The example follows best practices in JavaScript by utilizing asynchronous operations for efficient data fetching and WebAssembly for rendering performance. It also incorporates a resource management approach by providing a cleanup function that disposes of the SciChartSurface instance when it is no longer needed, addressing concerns detailed in the Memory Best Practices documentation. This strategy ensures proper disposal of resources and helps prevent memory leaks, aligning with the recommended practices outlined in the SciChart documentation.