Server Traffic Dashboard
Demonstrates handling realtime big data with different chart types using SciChart.js, High Performance JavaScript Charts
index.tsx
containerSizeHooks.ts
theme.ts
after-all-charts-init.ts
chart-configurations.ts
chart-types.ts
data-generation.ts
GridLayoutModifier.ts
main-chart-config.ts
ModifierGroup.ts
Overview.tsx
page-statistics-chart-config.ts
region-statistic-charts.ts
server-load-chart-config.ts
ThresholdSlider.tsx
VisibleRangeSynchronizationManager.ts
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();
73Server Traffic Dashboard - React Example
Overview
This React-based example, "Server Traffic Dashboard," demonstrates how to build a complex, interactive dashboard using SciChart.js within a React application. The dashboard brings together multiple charts—including a main time series chart, a page statistics chart, a server load chart, and region-based charts (both column and pie charts)—to provide a comprehensive view of server traffic and performance data.
Technical Implementation
The example is structured around React hooks and <SciChartReact/> components to manage lifecycle events and context. It uses a custom VisibleRangeSynchronizationManager to coordinate zooming and panning across different chart surfaces; see the Synchronizing Multiple Charts documentation for more details. Custom tooltip templates are implemented via option functions registered with the ChartBuilder API, as described in the Complex Options guide. Dynamic styling is achieved through a CustomPaletteProvider that adjusts point markers based on metadata, following the guidelines in the PaletteProvider API. Additionally, a specialized GridLayoutModifier enables the transformation of the server load chart into a grid of sub-charts with smooth animations, which is in line with techniques presented in the SubCharts Worked Example.
Features and Capabilities
Key features include real-time data updates, interactive data filtering, and advanced tooltips that display aggregated statistics (such as average request duration). The dashboard also supports a 100% stacked column view for URL statistics, which aggregates data across different pages as detailed in our Stacked Column Chart resources. Interactive animations and hover effects are implemented using the GenericAnimation framework (Generic Animations), and mouse event synchronization across chart modifiers is managed by a custom ModifierGroup class.
Integration and Best Practices
The implementation demonstrates excellent integration with React by encapsulating individual charts into <SciChartReact/> components and coordinating them through a shared context and a chart group loader. Techniques for real-time updates are implemented to ensure efficient rendering and smooth performance, as recommended in Realtime Updates. Additionally, advanced synchronization of mouse events across multiple charts highlights best practices for interactive dashboards; more details can be found in the Synchronizing ChartModifier Mouse Events article. For further insights into integrating SciChart.js with React, developers are encouraged to review the React Charts with SciChart.js blog post.
react Chart Examples & Demos
See Also: Performance Demos & Showcases (12 Demos)
Realtime React Chart Performance Demo
This demo showcases the incredible realtime performance of our React 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 React 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 React Chart by animating several series with thousands of data-points at 60 FPS
Realtime Audio Spectrum Analyzer Chart Example
See the frequency of recordings with the React audio spectrum analyzer example from SciChart. This real-time audio visualizer demo uses a Fourier Transform.
Oil & Gas Explorer React Dashboard
Demonstrates how to create Oil and Gas Dashboard
Client/Server Websocket Data Streaming
This demo showcases the incredible realtime performance of our JavaScript charts by updating the series with millions of data-points!
Rich Interactions Showcase
This demo showcases the incredible realtime performance of our React charts by updating the series with millions of data-points!
Dynamic Layout Showcase
Demonstrates a custom modifier which can convert from single chart to grid layout and back.
Dragabble Event Markers
Demonstrates how to repurpose a Candlestick Series into dragabble, labled, event markers
React Population Pyramid
Population Pyramid of Europe and Africa
High Performance SVG Cursor & Rollover
Demonstrates how to use the SVG render layer in SciChart.js to maintain smooth cursor interaction on heavy charts with millions of points.