JavaScript 64-Chart Dashboard Performance Demo

Sub Charts API Example - JavaScript

Overview

This example demonstrates a comprehensive use of the SciChart.js sub-charts API implemented using JavaScript. It creates a grid of 64 sub-charts arranged in an 8x8 layout where each sub-chart displays one or more renderable series (such as Line, Column, Band, Scatter, and Candlestick). The purpose of the example is to illustrate techniques for managing complex multi-chart dashboards with real-time data streaming while maintaining high performance.

Technical Implementation

The implementation starts with creating a main chart using the SciChartSurface API. Each sub-chart is added to the main surface via the addSubChart method and is positioned using relative coordinates calculated by a helper function. You can learn more about this technique in the SubCharts Positioning documentation. Each sub-chart is configured with its own invisible NumericAxis (customized using advanced options available in the Numeric Axis documentation) and different renderable series are added according to the series type. Data for each chart is pre-populated and updated in real time using functions such as prePopulateData and appendData. Real-time data streaming is implemented using iterative updates scheduled with setTimeout, a strategy detailed in the Realtime Updates tutorial. Performance is monitored by subscribing to the render events of a sub-chart, providing insights into average render times and maximum frames per second as described in the Performance Tips & Tricks documentation.

Features and Capabilities

Real-time Updates: The example handles streaming large datasets into multiple data series simultaneously by efficiently appending new data and removing old data when necessary, thus managing FIFO capacity effectively.

Theme Customization: The look and feel of the charts are customized by overriding theme methods (such as getStrokeColor and getFillColor) provided by SciChart.js. Refer to the SciChartJSDarkTheme documentation for more details on theme configuration.

Stacked and Multiple Series Integration: The implementation demonstrates how to integrate different renderable series types within a single sub-chart, including the use of stacked collections like StackedColumnCollection and StackedMountainCollection. This illustrates how multiple series can be synchronized and rendered together.

Sub-chart Layout: The use of helper functions to calculate sub-chart positions ensures that each sub-chart is placed correctly within the overall grid, enabling complex dashboard layouts. Each sub-chart maintains its own axis configuration while still being part of a unified main chart.

Integration and Best Practices

This example follows best practices for high-performance real-time charting applications. By leveraging techniques such as efficient data series management, real-time updates, and performance monitoring, developers can build scalable dashboards. The example’s approach to managing multiple sub-charts in a grid structure serves as a blueprint for creating complex, multi-view dashboards. For additional customization options such as advanced filtering, refer to the Data Series Realtime Updates documentation and the Custom Filters documentation.

Overall, this example provides a solid foundation for developing sophisticated real-time charting solutions using JavaScript with SciChart.js, showcasing effective performance optimization and modular chart configuration.