Oil & Gas Explorer JavaScript 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 And Gas Dashboard (JavaScript)
Overview
This example demonstrates an Oil And Gas Dashboard built using SciChart.js with a focus on a JavaScript implementation. The dashboard renders multiple 2D and 3D charts, incorporating interactive legends, custom SVG grid backgrounds, and synchronized zooming and panning across charts. Its purpose is to showcase high-performance data visualization techniques tailored for the Oil And Gas industry.
Technical Implementation
The implementation modularizes chart initialization by separating each chart into dedicated modules. This design promotes a clean separation of concerns and easier maintainability. Multiple vertical 2D charts are synchronized using the powerful SciChartVerticalGroup feature, ensuring that interactions such as zooming, panning, and crosshair tracking are coordinated across charts.
Enhanced interactivity is achieved through the integration of the RolloverModifier , which provides real-time tooltips and crosshair cursors. This modifier is configured to share a common modifier group across the vertical charts, delivering a unified user experience.
The dashboard also applies a custom SVG grid background to the shale chart by embedding inline SVG within its container. This approach allows for detailed customization of grid lines and background patterns, contributing to the overall aesthetic and clarity of the visualization. Further performance considerations, such as leveraging WebGL rendering for handling large datasets, are discussed in the Performance Tips & Tricks documentation.
Features and Capabilities
Chart Grouping and Synchronization: Multiple vertical charts are grouped and synchronized using the SciChartVerticalGroup, which ensures consistent zooming and panning behaviors. Additional technical details are available in the Synchronizing Vertical Charts documentation.
Advanced Chart Modifiers: The use of the RolloverModifier enriches the user interaction experience by providing dynamic, real-time tooltips and crosshair indicators. Developers can refer to the RolloverModifier API Documentation for further customization options.
Custom Theming and Styling: Custom themes are implemented to control colors and styles across both 2D and 3D charts. This includes customization of grid strokes, legend text, and series colors. Techniques for theming are well documented in the Using Theme Manager guide.
Integration and Best Practices
Even though this example is built with JavaScript, it demonstrates integration practices that also apply to frameworks like React. For instance, developers can apply responsive design principles using media query techniques similar to those described in Material UI’s useMediaQuery. The modular design of the chart initializations, along with techniques for synchronizing chart views, provides a solid foundation for building complex dashboards. Detailed guidance on linking multiple charts is available in the Linking Multiple Charts resource.
Conclusion
This Oil And Gas Dashboard example illustrates a high-performance, modular approach to creating synchronized 2D and 3D charts using SciChart.js in a JavaScript environment. By leveraging features such as chart grouping, advanced modifiers, custom theming, and performance optimizations, developers can build interactive and responsive dashboards with rich data visualization capabilities. Further details and best practices can be explored in the corresponding documentation links.
javascript Chart Examples & Demos
See Also: Performance Demos & Showcases (12 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 Example
See the frequency of recordings with the JavaScript audio spectrum analyzer example from SciChart. This real-time 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 JavaScript charts by updating the series with millions of data-points!
Rich Interactions Showcase
This demo showcases the incredible realtime performance of our JavaScript 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
JavaScript 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.