1import { IThemeProvider, SciChartJsNavyTheme } from "scichart";
2
3export interface AppThemeBase {
4    SciChartJsTheme: IThemeProvider;
5
6    // general colors
7    ForegroundColor: string;
8    Background: string;
9
10    // Series colors
11    VividSkyBlue: string;
12    VividPink: string;
13    VividTeal: string;
14    VividOrange: string;
15    VividBlue: string;
16    VividPurple: string;
17    VividGreen: string;
18    VividRed: string;
19
20    MutedSkyBlue: string;
21    MutedPink: string;
22    MutedTeal: string;
23    MutedOrange: string;
24    MutedBlue: string;
25    MutedPurple: string;
26    MutedRed: string;
27
28    PaleSkyBlue: string;
29    PalePink: string;
30    PaleTeal: string;
31    PaleOrange: string;
32    PaleBlue: string;
33    PalePurple: string;
34}
35
36export class SciChart2022AppTheme implements AppThemeBase {
37    SciChartJsTheme = new SciChartJsNavyTheme();
38
39    // General colors
40    ForegroundColor = "#FFFFFF";
41    Background = this.SciChartJsTheme.sciChartBackground;
42
43    // Series colors
44    VividSkyBlue = "#50C7E0";
45    VividPink = "#EC0F6C";
46    VividTeal = "#30BC9A";
47    VividOrange = "#F48420";
48    VividBlue = "#364BA0";
49    VividPurple = "#882B91";
50    VividGreen = "#67BDAF";
51    VividRed = "#C52E60";
52
53    DarkIndigo = "#14233C";
54    Indigo = "#264B93";
55
56    MutedSkyBlue = "#83D2F5";
57    MutedPink = "#DF69A8";
58    MutedTeal = "#7BCAAB";
59    MutedOrange = "#E7C565";
60    MutedBlue = "#537ABD";
61    MutedPurple = "#A16DAE";
62    MutedRed = "#DC7969";
63
64    PaleSkyBlue = "#E4F5FC";
65    PalePink = "#EEB3D2";
66    PaleTeal = "#B9E0D4";
67    PaleOrange = "#F1CFB5";
68    PaleBlue = "#B5BEDF";
69    PalePurple = "#CFB4D5";
70}
71
72export const appTheme = new SciChart2022AppTheme();
73

Server Traffic Dashboard (JavaScript)

Overview

This example, "Server Traffic Dashboard," demonstrates how to create a sophisticated real-time dashboard using SciChart.js with a pure JavaScript approach. The dashboard displays multiple interlinked charts—such as overall request rates, URL statistics, server load, and regional breakdowns—while offering interactive controls and smooth animations to provide deep insights into server traffic patterns.

Technical Implementation

The implementation leverages SciChart.js’s core capabilities to handle high-performance rendering and real-time updates. For instance, the synchronization of the x-axis visible range across charts is managed by the custom VisibleRangeSynchronizationManager, a solution that follows the practices outlined in the Synchronizing Multiple Charts documentation. In addition, a GridLayoutModifier is used to dynamically rearrange the server load chart into a grid of sub-charts, a technique closely related to concepts found in the What is the SubCharts API? documentation. The code also makes extensive use of data grouping and filtering techniques to efficiently process large datasets in JavaScript. CustomPaletteProvider dynamically adjusts the color of data points based on computed values (such as average duration), a feature that is well explained in the PaletteProvider API reference. Additionally, animations for smooth transitions and updates are implemented using GenericAnimation and WaveAnimation, as described in the Generic Animations documentation.

Features and Capabilities

The dashboard supports real-time updates by clearing and appending new data to the charts, ensuring that the displayed information is always current. Interactive modifiers such as CursorModifier, RolloverModifier, and various zoom and pan modifiers enrich the user experience by providing detailed tooltips and responsive navigation. A notable feature is the interactive threshold slider, which allows users to adjust parameters like the average duration threshold; this, in turn, changes the conditional coloring of data points in real time. These techniques not only improve usability but also demonstrate effective methods for managing large datasets in a high-performance charting environment.

Integration and Best Practices

While some components hint at integrations typically seen with React, this example is implemented entirely with JavaScript. It follows best practices by extending functionality through mechanisms such as chartBuilder.registerFunction — enabling advanced customization and modular configuration as noted in the Complex Options documentation. The example also illustrates how to synchronize mouse events across charts using a custom ModifierGroup, ensuring that user interactions such as hovering and selection are consistently propagated. Developers looking to optimize performance and interactivity in their own projects should review the Performance Tips & Tricks documentation for further guidance.

javascript Chart Examples & Demos

Realtime JavaScript Chart Performance Demo

This demo showcases the incredible realtime performance of our JavaScript charts by updating the series with millions of data-points!

Load 500 Series x 500 Points Performance Demo

This demo showcases the incredible performance of our JavaScript Chart by loading 500 series with 500 points (250k points) instantly!

Load 1 Million Points Performance Demo

This demo showcases the incredible performance of our JavaScript Chart by loading a million points instantly.

Realtime Ghosted Traces

This demo showcases the realtime performance of our JavaScript Chart by animating several series with thousands of data-points at 60 FPS

Realtime Audio Spectrum Analyzer Chart | SciChart.js Demo

Realtime Audio Spectrum Analyzer Chart Example

See the frequency of recordings with the JavaScript audio spectrum analyzer example from SciChart. This real-time visualizer demo uses a Fourier Transform.