Virtualized JavaScript Charts: Load Data on Zoom/Pan

Virtualized Data With Overview and JavaScript

Overview

This example demonstrates how to build a high-performance chart using SciChart.js with a virtualized data approach in JavaScript. The implementation includes a main chart that dynamically loads data based on the xAxis.visibleRange and an overview chart that provides context for the current view.

Technical Implementation

The chart is initialized via the SciChartSurface.create() method, where numeric axes with defined visible ranges are configured. Large datasets are efficiently managed using XyDataSeries and rendered with FastLineRenderableSeries. An overview scrollbar is added to the chart using SciChartOverview.create(). As the chart is zoomed or scrolled, data is fetched from REST endpoints using the fetch API, and the number of loaded data points is adjusted based on the chart's DOM canvas width, thus optimizing performance as described in the JavaScript Chart with Virtualized Data 10 Million Points example. Visible range updates are handled by subscribing to visibleRangeChanged on the x-axis and debouncing these events using RxJS’s debounceTime operator, ensuring that data updates occur smoothly.

Features and Capabilities

The example offers real-time update capabilities through dynamic data fetching whenever the user pans or zooms the chart. Smooth animated transitions are achieved using easing functions (e.g., easing.outExpo) for axis updates. In addition, error handling is managed by displaying an error message on the chart using NativeTextAnnotation when data fetching fails; further details can be found in the NativeTextAnnotation documentation.

Integration and Best Practices

Even though this example is built using JavaScript, it integrates interactive features such as zooming and panning through modifiers like ZoomExtentsModifier, ZoomPanModifier, XAxisDragModifier, and YAxisDragModifier. This aligns with best practices for creating responsive and interactive charts. Developers are encouraged to review the ZoomPanModifier and ZoomExtentsModifier documentation to fully leverage these features. Performance optimization techniques, as discussed in the Performance Tips & Tricks guide, further enhance the chart’s responsiveness when dealing with large datasets.

Overall, this example showcases an effective approach to rendering large datasets with virtualized data, real-time updates, and robust interactivity, providing a strong foundation for building advanced visualizations with SciChart.js in a JavaScript environment.