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 on Angular
Overview
This example demonstrates a comprehensive server traffic dashboard implemented using SciChart.js within an Angular framework. It showcases real-time data updates across multiple chart types including a main chart, URL statistics, server load, and region statistics, offering interactive exploration and high performance visualization capabilities.
Technical Implementation
The dashboard is built by asynchronously initializing several SciChart surfaces using ScichartAngularComponent from scichart-angular. Each chart is configured via dedicated Angular services which manage state updates and inter-chart communication. The implementation employs a visible range synchronization manager that ensures the x-axis visible ranges remain consistent across charts as detailed in the Synchronizing Multiple Charts guide. Custom modifiers such as the GridLayoutModifier leverage SciChart.js’ GenericAnimation API to provide smooth grid formation and transition effects, which aligns with best practices for implementing Angular animations.
Features and Capabilities
Key features include real-time data filtering based on server and location selections, dynamic chart updating, and interactive tooltips defined through custom palette providers registered with the chart builder. Advanced interactivity is achieved with custom rollover and cursor modifiers that enhance user engagement. Performance considerations are addressed by optimizing render routines to handle large data volumes, as described in the Performance Optimization Tips.
Integration and Best Practices
From an Angular integration perspective, this dashboard illustrates effective state management and component communication techniques, crucial for real-time data visualization. It adopts a responsive grid layout rendered through Angular, ensuring that charts resize and update seamlessly. Developers are encouraged to review Angular real-time data visualization and component interaction guidance on managing chart thresholds and synchronization, aligning with best practices for implementing interactive dashboards in Angular. Additionally, custom theming and tooltip configurations provided via SciChart.js enhance the overall user experience, marking this example as a robust reference for high-performance Angular dashboard development.
angular Chart Examples & Demos
See Also: Performance Demos & Showcases (12 Demos)
Realtime Angular Chart Performance Demo
This demo showcases the incredible realtime performance of our Angular 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 Angular 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 Angular 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 Angular audio spectrum analyzer example from SciChart. This real-time audio visualizer demo uses a Fourier Transform.
Oil & Gas Explorer Angular 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 Angular 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
Angular 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.