Oil & Gas Explorer Angular Dashboard
This is an example of the kind of complex, multi-chart dashboards used in the oil and gas industry.
index.tsx
3d.ts
chartUtils.ts
DensityChart.ts
eighth.ts
fifth.ts
first.ts
fourth.ts
ninth.ts
OIlGasStyles.css
PoreSpaceChart.ts
RangeFillPaletteProvider.ts
ResistivityChart.ts
second.ts
seventh.ts
ShaleChart.ts
sixth.ts
SonicChart.ts
TextureChart.ts
theme.ts
third.ts
vChartUtils.ts
Copy to clipboard
Minimise
Fullscreen
1import { ThemeProvider } from "scichart/Charting/Themes/IThemeProvider";
2import { SciChartJSDarkv2Theme } from "scichart/Charting/Themes/SciChartJSDarkv2Theme";
3import { SciChartJSLightTheme } from "scichart/Charting/Themes/SciChartJSLightTheme";
4import { SciChartJsNavyTheme } from "scichart/Charting/Themes/SciChartJsNavyTheme";
5
6const getCssColor = (cssVar: string, fallback: string): string => {
7 if (typeof document === "undefined") {
8 return fallback;
9 }
10
11 const cssValue = getComputedStyle(document.documentElement).getPropertyValue(cssVar).trim();
12 return cssValue || fallback;
13};
14
15export interface AppThemeBase {
16 SciChartJsTheme: ThemeProvider;
17
18 // General colours
19 LegendTextColor: string;
20 SidebarBackground: string;
21 SidebarTextColor: string;
22
23 // Charts grid colours
24 ChartsGridStroke1: string;
25 ChartsGridStroke2: string;
26 ChartsGridStroke3: string;
27
28 // 3D Chart colors
29 Chart3DScatterFill: string;
30 Chart3DColor1: string;
31 Chart3DColor2: string;
32 Chart3DColor3: string;
33 Chart3DColor4: string;
34 Chart3DColor5: string;
35 Chart3DColor6: string;
36 Chart3DColor7: string;
37
38 // Shale chart
39 ShaleBackgroundColor: string;
40 ShaleOilLegendColor: string;
41 ShaleWaterLegendColor: string;
42 ShaleWaterSeries: string;
43 ShaleSeriesStroke: string;
44
45 // Density chart
46 DensityLegendSeparator: string;
47 DensityBackgroundOne: string;
48 DensityBackgroundTwo: string;
49 DensityStrokeY: string;
50 DensityStrokeY1: string;
51 DensityFillY: string;
52 DensityFillY1: string;
53
54 // Resistivity Chart
55 ResistivityLineStroke: string;
56 ResistivityLineStroke2: string;
57
58 // Pore Space Chart
59 PoreSpaceStroke1: string;
60 PoreSpaceStroke2: string;
61 PoreSpacePhieFill: string;
62 PoreSpacePhitFill: string;
63 PoreSpaceScatterStroke: string;
64 PoreSpaceScatterFill: string;
65
66 // Sonic vertical
67 SonicGradient1: string;
68 SonicGradient2: string;
69 SonicGradient3: string;
70 SonicGradient4: string;
71 SonicGradient5: string;
72 SonicGradient6: string;
73
74 // Texture chart
75 TextureFill: string;
76 TextureLine: string;
77 TextureSandFill: string;
78 TextureGrainFill: string;
79 TextureGravelFill: string;
80 RolloverLineColor: string;
81 RolloverTooltipFill: string;
82 RolloverTooltipText: string;
83}
84
85// @ts-ignore
86export class App2022BrandTheme implements AppThemeBase {
87 SciChartJsTheme = new SciChartJsNavyTheme();
88
89 // general colours
90 get LegendTextColor() {
91 return getCssColor("--text", "LightGray");
92 }
93 get SidebarBackground() {
94 return getCssColor("--bg-darker", this.SciChartJsTheme.sciChartBackground);
95 }
96 get SidebarTextColor() {
97 return getCssColor("--text", "#FFF");
98 }
99
100 // Charts grid colours
101 ChartsGridStroke1 = "#AE408E";
102 ChartsGridStroke2 = "#EA6F63";
103 ChartsGridStroke3 = "#45BEE8";
104
105 // 3D Chart colors
106 Chart3DScatterFill = "#F1CFB5";
107 Chart3DColor1 = "#28266D";
108 Chart3DColor2 = "#E7C565";
109 Chart3DColor3 = "#83D2F5";
110 Chart3DColor4 = "#209FD9";
111 Chart3DColor5 = "#BE7336";
112 Chart3DColor6 = "#AE408E";
113 Chart3DColor7 = "#634E97";
114
115 // Shale chart
116 ShaleBackgroundColor = "#67BDAFAA";
117 ShaleOilLegendColor = "#AE408E";
118 ShaleWaterLegendColor = "#209FD9";
119 ShaleWaterSeries = "#209FD9";
120 ShaleSeriesStroke = "#E4F5FC";
121
122 // Density chart
123 DensityLegendSeparator = "#264B93";
124 DensityBackgroundOne = "#537ABD";
125 DensityBackgroundTwo = "#67BDAF";
126 DensityStrokeY = "#45BEE8";
127 DensityStrokeY1 = "#AE408E";
128 DensityFillY = "#45BEE877";
129 DensityFillY1 = "#67BDAF";
130
131 // Resistivity Chart
132 ResistivityLineStroke = "#45BEE8";
133 ResistivityLineStroke2 = "#67BDAF";
134
135 // Pore Space Chart
136 PoreSpaceStroke1 = "#E4F5FC";
137 PoreSpaceStroke2 = "#F1CFB5";
138 PoreSpacePhieFill = "#67BDAF";
139 PoreSpacePhitFill = "#F48420";
140 PoreSpaceScatterStroke = "#FFF";
141 PoreSpaceScatterFill = "#83D2F5";
142
143 // Sonic vertical
144 SonicGradient1 = "#634E97";
145 SonicGradient2 = "#264B93";
146 SonicGradient3 = "#AE408E";
147 SonicGradient4 = "#45BEE8";
148 SonicGradient5 = "#E4F5FC";
149 SonicGradient6 = "#DF69A8";
150
151 // Texture chart
152 TextureFill = "#90808080";
153 TextureLine = "#808080";
154 TextureSandFill = "#E7C565";
155 TextureGrainFill = "#209FD9";
156 TextureGravelFill = "#BE7336";
157
158 // Cursors
159 RolloverLineColor = "#DF69A8";
160 RolloverTooltipFill = "#AE408E";
161 RolloverTooltipText = "#FFF";
162}
163
164// tslint:disable-next-line:max-classes-per-file
165export class AppDarkTheme implements AppThemeBase {
166 SciChartJsTheme = new SciChartJSDarkv2Theme();
167
168 // general colours
169 get LegendTextColor() {
170 return getCssColor("--text", "LightGray");
171 }
172 get SidebarBackground() {
173 return getCssColor("--bg-darker", this.SciChartJsTheme.sciChartBackground);
174 }
175 get SidebarTextColor() {
176 return getCssColor("--text", "#FFF");
177 }
178
179 // Charts grid colours
180 ChartsGridStroke1 = "#d52aa7";
181 ChartsGridStroke2 = "#2bd452";
182 ChartsGridStroke3 = "#916eeb";
183
184 // 3D Chart colors
185 Chart3DScatterFill = "#a88d32";
186 Chart3DColor1 = "#0a0aae";
187 Chart3DColor2 = "#2964ba";
188 Chart3DColor3 = "#36e15a";
189 Chart3DColor4 = "#f7e24d";
190 Chart3DColor5 = "#b8e946";
191 Chart3DColor6 = "#dd8037";
192 Chart3DColor7 = "#a81d09";
193
194 // Shale chart
195 ShaleBackgroundColor = "#90EE90";
196 ShaleOilLegendColor = "#b22222";
197 ShaleWaterLegendColor = "#3333FF";
198 ShaleWaterSeries = "#E4E840";
199 ShaleSeriesStroke = "#474747";
200
201 // Density chart
202 DensityLegendSeparator = "#FF3333";
203 DensityBackgroundOne = "#228B22";
204 DensityBackgroundTwo = "#FFA500";
205 DensityStrokeY = "#1C1C1E";
206 DensityStrokeY1 = "#FF3333";
207 DensityFillY = "#228B22";
208 DensityFillY1 = "#FFA500";
209
210 // Resistivity Chart
211 ResistivityLineStroke = "#00BFFF";
212 ResistivityLineStroke2 = "#FF4500";
213
214 // Pore Space Chart
215 PoreSpaceStroke1 = "#4682B4";
216 PoreSpaceStroke2 = "#757000";
217 PoreSpacePhieFill = "#4682B490";
218 PoreSpacePhitFill = "#75700090";
219 PoreSpaceScatterStroke = "#FFF";
220 PoreSpaceScatterFill = "#005A9C";
221
222 // Sonic vertical
223 SonicGradient1 = "#00008B";
224 SonicGradient2 = "#3333FF";
225 SonicGradient3 = "#228B22";
226 SonicGradient4 = "#DFFF00";
227 SonicGradient5 = "#FFFF00";
228 SonicGradient6 = "#FF3333";
229
230 // Texture chart
231 TextureFill = "#90808080";
232 TextureLine = "#808080";
233 TextureSandFill = "#DAA520";
234 TextureGrainFill = "#008b8b";
235 TextureGravelFill = "#33FF33";
236
237 // Cursors
238 RolloverLineColor = "#AE408E";
239 RolloverTooltipFill = "#AE408E";
240 RolloverTooltipText = "#FFF";
241}
242
243// tslint:disable-next-line:max-classes-per-file
244export class AppLightTheme implements AppThemeBase {
245 SciChartJsTheme = new SciChartJSLightTheme();
246
247 // general colours
248 get LegendTextColor() {
249 return getCssColor("--text", "#222");
250 }
251 get SidebarBackground() {
252 return getCssColor("--bg-darker", this.SciChartJsTheme.sciChartBackground);
253 }
254 get SidebarTextColor() {
255 return getCssColor("--text", "#222");
256 }
257
258 // Charts grid colours
259 ChartsGridStroke1 = "#DF69A8";
260 ChartsGridStroke2 = "#EA6F63";
261 ChartsGridStroke3 = "#45BEE8";
262
263 // 3D Chart colors
264 Chart3DScatterFill = "#DF69A8";
265 Chart3DColor1 = "#E4F5FC";
266 Chart3DColor2 = "#45BEE8";
267 Chart3DColor3 = "#45BEE8";
268 Chart3DColor4 = "#EA6F63";
269 Chart3DColor5 = "#DF69A8";
270 Chart3DColor6 = "#8065A3";
271 Chart3DColor7 = "#364BA0";
272
273 // Shale chart
274 ShaleBackgroundColor = "#B9E0D4";
275 ShaleOilLegendColor = "#DF69A8";
276 ShaleWaterLegendColor = "#45BEE8";
277 ShaleWaterSeries = "#45BEE877";
278 ShaleSeriesStroke = "#264B93";
279
280 // Density chart
281 DensityLegendSeparator = "#264B93";
282 DensityBackgroundOne = "#AE408E";
283 DensityBackgroundTwo = "#EA6F63AA";
284 DensityStrokeY = "#45BEE8";
285 DensityStrokeY1 = "#AE408E";
286 DensityFillY = "#AE408EAA";
287 DensityFillY1 = "#EA6F63AA";
288
289 // Resistivity Chart
290 ResistivityLineStroke = "#45BEE8";
291 ResistivityLineStroke2 = "#AE408E";
292
293 // Pore Space Chart
294 PoreSpaceStroke1 = "#E4F5FC";
295 PoreSpaceStroke2 = "#F1CFB5";
296 PoreSpacePhieFill = "#45BEE8";
297 PoreSpacePhitFill = "#AE408E";
298 PoreSpaceScatterStroke = "#EA6F63";
299 PoreSpaceScatterFill = "#EA6F63";
300
301 // Sonic vertical
302 SonicGradient1 = "#634E9733";
303 SonicGradient2 = "#264B9355";
304 SonicGradient3 = "#AE408E77";
305 SonicGradient4 = "#45BEE899";
306 SonicGradient5 = "#E4F5FCAA";
307 SonicGradient6 = "#DF69A8";
308
309 // Texture chart
310 TextureFill = "#90808080";
311 TextureLine = "#808080";
312 TextureSandFill = "#E7C565";
313 TextureGrainFill = "#209FD9";
314 TextureGravelFill = "#BE7336";
315
316 // Cursors
317 RolloverLineColor = "#364BA0";
318 RolloverTooltipFill = "#364BA0";
319 RolloverTooltipText = "#FFF";
320}
321
322export const appTheme: AppThemeBase = new App2022BrandTheme();
323Oil & Gas Explorer Angular Dashboard
Overview
This example demonstrates a complex multi-chart dashboard built for Angular applications targeting the oil and gas industry. It showcases the integration of multiple 2D and 3D charts to deliver an advanced, interactive visualization experience within an Angular framework.
Technical Implementation
The dashboard takes advantage of Angular’s lifecycle management to initialize and destroy SciChart.js charts efficiently in line with best practices outlined in Angular Lifecycle Hooks. A key implementation detail is the grouping of individual 2D charts using the SciChartVerticalGroup, which facilitates synchronized zooming, panning, and rollover interactions as described in the Synchronizing Multiple Charts documentation. The example also applies responsive design strategies to adjust the layout based on screen size, ensuring optimal performance and usability on both desktop and mobile environments.
Features and Capabilities
This dashboard includes real-time data interaction capabilities and employs advanced chart features such as interactive modifiers like the RolloverModifier to enhance tooltip and crosshair functionality. The theming and styling of the charts are managed via a dedicated theme module, allowing for a consistent and branded user experience, which aligns with techniques discussed in Using Theme Manager - JavaScript Chart - SciChart.
Integration and Best Practices
The implementation adheres to Angular integration best practices by utilizing dependency injection for managing themes and services responsible for chart initialization. Each chart component is designed to be modular and easily maintainable, a strategy that supports long-term scalability and performance optimization. This design approach, combined with the efficient use of chart grouping and responsive layout management, offers valuable insights into constructing high-performance, interactive dashboards within an Angular environment. Further insights into Angular integration with high-performance JavaScript charts can be found in the Advanced JavaScript Chart and Graph Library | SciChart JS resource.
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.
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!
Server Traffic Dashboard
This dashboard demo showcases the incredible realtime performance of our Angular 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
NEW!
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.
Quick Links
Useful Links
SciChart Ltd, 16 Beaufort Court, Admirals Way, Docklands, London, E14 9XL.