Rich Interactions Showcase

Interactive Wave Simulation Heatmap Demo with JavaScript

Overview

This example, titled "Heatmap Interactions", demonstrates a powerful real-time 2D wave simulation using SciChart.js implemented in JavaScript. It showcases advanced interactive features such as dynamic addition of input/output annotations and custom drag-and-drop behavior, enabling users to interact with heatmap data in real time.

Technical Implementation

The implementation extends the base class ChartModifierBase2D to create custom modifiers like AddIOModifier and PointDragModifier. These modifiers handle mouse events to add annotations and update data series, following patterns detailed in the Custom Chart Modifier API. Coordinate transformations are managed with functions such as translateFromCanvasToSeriesViewRect(), which convert canvas mouse coordinates into data coordinates via APIs described in the Axis APIs - Convert Pixel to Data Coordinates documentation.

Interactive annotations are used extensively; for instance, TextAnnotation prompts like "Add Input" and "Add Output" provide user interactivity. For more details on creating movable and interactive annotations, refer to the TextAnnotation documentation.

Real-time simulation is achieved by updating a UniformHeatmapDataSeries on a recurring timer, effectively simulating 2D wave propagation. This approach is well covered in the Updating (Realtime) Heatmaps documentation. Additionally, custom animations using GenericAnimation add fade-in help messages, ensuring smooth visual transitions; you can learn more about this in the Generic Animations documentation.

Features and Capabilities

• Dynamic Annotation Handling: Users can add or remove annotations interactively, with snapping behavior managed by properties like stepSize.
• Real-time Data Updates: The heatmap is continuously updated to simulate wave propagation in real time.
• Drag and Drop Interaction: Custom modifiers enable hit testing and dynamic updating of XyDataSeries data points; see Custom ChartModifiers documentation for more details.
• High DPI Optimization: The implementation leverages DpiHelper.PIXEL_RATIO to ensure accurate interactions on high-resolution displays.

Integration and Best Practices

This example is built purely with JavaScript, avoiding additional frameworks such as Angular or React. Its modular structure separates chart initialization, modifier logic, and simulation updates, which aligns with best practices for maintainable and high-performance interactive chart applications. Developers are encouraged to consult the provided documentation links to gain deeper insights into customizing chart behavior and optimizing performance with SciChart.js.