JavaScript Arc Gauge & FIFO Scrolling Charts Dashboard Example
Creates a JavaScript Realtime Radial Gauges and Fifo Scrolling Charts Dashboard using SciChart.js, which displays Polar Gauge Charts for the current values, and a cartesian historical FIFO view.
drawExample.ts
index.html
vanilla.ts
theme.ts
1import {
2 Rect,
3 XyDataSeries,
4 PolarNumericAxis,
5 EPolarAxisMode,
6 NumberRange,
7 EAxisAlignment,
8 SciChartSurface,
9 SciChartPolarSubSurface,
10 ECoordinateMode,
11 EVerticalAnchorPoint,
12 EHorizontalAnchorPoint,
13 SciChartSubSurface,
14 NumericAxis,
15 FastLineRenderableSeries,
16 DateTimeNumericAxis,
17 NativeTextAnnotation,
18 PolarArcAnnotation,
19 Thickness,
20 EAutoRange,
21} from "scichart";
22import { appTheme } from "../../../theme";
23
24const drawGaugeSubchart = async (
25 parentSurface: SciChartSurface,
26 gaugeOptions: {
27 startValue: number;
28 position: Rect;
29 }
30) => {
31 const { startValue, position } = gaugeOptions;
32
33 // Create the SciChartPolarSubSurface
34 const sciChartSurface = SciChartPolarSubSurface.createSubSurface(parentSurface, {
35 padding: new Thickness(0, 10, 10, 10),
36 position: position,
37 background: "transparent",
38 loader: false,
39 });
40
41 // Constants that won't change
42 const gaugeRange = new NumberRange(0, 10);
43 const gradientColors = [appTheme.VividGreen, appTheme.VividOrange, appTheme.VividPink];
44 const columnYValues = [5, 7.5, 10];
45
46 // Pre-calculate the color thresholds
47 const colorThresholds = columnYValues.map((val, i) => ({
48 threshold: val,
49 color: gradientColors[i],
50 }));
51
52 const radialXAxis = new PolarNumericAxis(parentSurface.webAssemblyContext2D, {
53 polarAxisMode: EPolarAxisMode.Radial,
54 axisAlignment: EAxisAlignment.Right,
55 drawMinorGridLines: false,
56 drawMajorGridLines: false,
57 drawMajorTickLines: false,
58 drawMinorTickLines: false,
59 drawLabels: false,
60 });
61 sciChartSurface.xAxes.add(radialXAxis);
62
63 const angularYAxis = new PolarNumericAxis(parentSurface.webAssemblyContext2D, {
64 polarAxisMode: EPolarAxisMode.Angular,
65 axisAlignment: EAxisAlignment.Top,
66 visibleRange: gaugeRange,
67 zoomExtentsToInitialRange: true,
68 flippedCoordinates: true,
69 totalAngle: Math.PI * 1.4,
70 startAngle: -Math.PI * 0.2,
71 drawMinorGridLines: false,
72 drawMajorGridLines: false,
73 drawMinorTickLines: false,
74 drawMajorTickLines: false,
75 drawLabels: false,
76 });
77 sciChartSurface.yAxes.add(angularYAxis);
78
79 // gray background arc
80 const backgroundArc = new PolarArcAnnotation({
81 x2: 7,
82 x1: 9.4,
83 y1: gaugeRange.min,
84 y2: gaugeRange.max,
85 fill: "#88888822",
86 strokeThickness: 0,
87 });
88 sciChartSurface.annotations.add(backgroundArc);
89
90 // Add 3 thin arc sectors
91 columnYValues.forEach((yVal, i) => {
92 const thinArc = new PolarArcAnnotation({
93 x2: 9.7,
94 x1: 10,
95 y1: columnYValues[i - 1] ?? 0,
96 y2: yVal,
97 fill: gradientColors[i],
98 strokeThickness: 0,
99 });
100 sciChartSurface.annotations.add(thinArc);
101 });
102
103 // Initial color calculation
104 const getColorForValue = (value: number) => {
105 const threshold = colorThresholds.find((t) => value <= t.threshold);
106 return threshold ? threshold.color : gradientColors[gradientColors.length - 1];
107 };
108
109 const initialColor = getColorForValue(startValue);
110
111 const valueArc = new PolarArcAnnotation({
112 id: "value_arc",
113 x2: 7,
114 x1: 9.4,
115 y1: gaugeRange.min,
116 y2: startValue,
117 fill: initialColor,
118 strokeThickness: 0,
119 });
120 sciChartSurface.annotations.add(valueArc);
121
122 const centeredText = new NativeTextAnnotation({
123 text: `${startValue.toFixed(2)}`,
124 x1: 0,
125 y1: 0,
126 textColor: initialColor,
127 fontSize: 45,
128 xCoordinateMode: ECoordinateMode.DataValue,
129 yCoordinateMode: ECoordinateMode.DataValue,
130 verticalAnchorPoint: EVerticalAnchorPoint.Center,
131 horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
132 });
133 sciChartSurface.annotations.add(centeredText);
134
135 function animateGaugeArc(from: number, to: number, steps = 10) {
136 const step = (to - from) / steps;
137 let currentValue = from;
138
139 for (let i = 0; i <= steps; i++) {
140 setTimeout(() => {
141 valueArc.y2 = currentValue;
142 currentValue += step;
143 }, i * 16.67); // ~60 FPS
144 }
145 }
146
147 // Optimized update function
148 function updateGaugeValue(newVal: number) {
149 // Only update if value actually changed
150 if (valueArc.y2 !== newVal) {
151 const newColor = getColorForValue(newVal);
152
153 // Only update color if it changed
154 if (valueArc.fill !== newColor) {
155 valueArc.fill = newColor; // todo: fix
156 valueArc.stroke = newColor;
157 valueArc.invalidateParentCallback();
158 centeredText.textColor = newColor;
159 }
160
161 centeredText.text = `${newVal.toFixed(2)}`;
162
163 // Animate the arc
164 animateGaugeArc(valueArc.y2, newVal);
165 }
166 }
167
168 return {
169 sciChartSurface,
170 controls: {
171 updateGaugeValue,
172 },
173 };
174};
175
176const drawFifoSubchart = async (
177 parentSurface: SciChartSurface,
178 options: {
179 position: Rect;
180 seriesColor: string;
181 }
182) => {
183 const { position, seriesColor } = options;
184
185 const fifoSubchart1 = SciChartSubSurface.createSubSurface(parentSurface, {
186 theme: appTheme.SciChartJsTheme,
187 position: position,
188 });
189
190 fifoSubchart1.xAxes.add(
191 new DateTimeNumericAxis(parentSurface.webAssemblyContext2D, {
192 visibleRange: new NumberRange(Date.now(), Date.now() + 12000), // 1 minute range
193 autoRange: EAutoRange.Always,
194 })
195 );
196 const yAxis = new NumericAxis(parentSurface.webAssemblyContext2D, {
197 labelPrecision: 0,
198 visibleRange: new NumberRange(-1, 11),
199 });
200 fifoSubchart1.yAxes.add(yAxis);
201
202 const dataSeries = new XyDataSeries(parentSurface.webAssemblyContext2D, {
203 xValues: [],
204 yValues: [],
205 fifoCapacity: 100,
206 dataSeriesName: "FIFO Data Series",
207 });
208
209 const fifoSeries1 = new FastLineRenderableSeries(parentSurface.webAssemblyContext2D, {
210 dataSeries: dataSeries,
211 stroke: seriesColor,
212 strokeThickness: 3,
213 });
214 fifoSubchart1.renderableSeries.add(fifoSeries1);
215
216 return {
217 sciChartSurface: fifoSubchart1,
218 controls: {
219 appendData: (x: number, y: number) => {
220 dataSeries.append(x, y);
221 },
222 },
223 };
224};
225
226export const drawExample = async (rootElement: string | HTMLDivElement) => {
227 const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
228 theme: appTheme.SciChartJsTheme,
229 });
230
231 // Polar Subchart 1
232 const { sciChartSurface: p1Sub, controls: p1Controls } = await drawGaugeSubchart(sciChartSurface, {
233 startValue: 8.2,
234 position: new Rect(0, 0, 0.4, 0.5),
235 });
236
237 // Polar Subchart 2
238 const { sciChartSurface: p2Sub, controls: p2Controls } = await drawGaugeSubchart(sciChartSurface, {
239 startValue: 4.2,
240 position: new Rect(0, 0.5, 0.4, 0.5),
241 });
242
243 // Cartesian Subchart 1
244 const { sciChartSurface: f1Sub, controls: f1Controls } = await drawFifoSubchart(sciChartSurface, {
245 position: new Rect(0.4, 0, 0.6, 0.5),
246 seriesColor: appTheme.VividPink,
247 });
248
249 // Cartesian Subchart 2
250 const { sciChartSurface: f2Sub, controls: f2Controls } = await drawFifoSubchart(sciChartSurface, {
251 position: new Rect(0.4, 0.5, 0.6, 0.5),
252 seriesColor: appTheme.VividTeal,
253 });
254
255 let lastX = Date.now();
256 let lastY = 0;
257
258 // Mock data updates
259 setInterval(() => {
260 const x = (lastX += 100);
261 const y = Math.min(Math.max((lastY += Math.random() * 2 - 1), 0), 10); // clamp random walk between 0 and 10
262 lastY = y;
263
264 p1Controls.updateGaugeValue(y);
265 p2Controls.updateGaugeValue(10 - y);
266
267 f1Controls.appendData(x, y);
268 f2Controls.appendData(x, 10 - y);
269 }, 100); // 10 appends per second
270
271 return { sciChartSurface, wasmContext };
272};
273Realtime Radial Gauges and Fifo Scrolling Charts Dashboard - React
Overview
This React example demonstrates a dynamic dashboard featuring polar gauge charts and FIFO (First-In-First-Out) line charts using SciChart.js. The implementation combines SciChartPolarSubSurface for gauge visualization with SciChartSubSurface for real-time data streaming.
Technical Implementation
The dashboard uses React's SciChartReact component with an initChart function that creates two polar gauges and two FIFO charts. The gauges are built using PolarArcAnnotation for the arc segments and NativeTextAnnotation for centered values. The FIFO charts utilize XyDataSeries with fifoCapacity for efficient memory management.
Features and Capabilities
Key features include:
- Real-time updates with smooth gauge needle animations
- Color thresholds that change based on value ranges (green/orange/pink)
- Optimized rendering through WebGL acceleration
- Responsive layout using relative positioning with Rect coordinates
Integration and Best Practices
The example follows React best practices by:
- Using the SciChart React wrapper for proper lifecycle management
- Implementing efficient updates with
requestAnimationFrame - Separating gauge and chart logic into reusable functions
- Providing cleanup via
sciChartSurface.delete()
javascript Chart Examples & Demos
See Also: Polar Charts (21 Demos)
JavaScript Polar Line Chart
Explore the React Polar Line Chart example to create data labels, line interpolation, gradient palette stroke and startup animations. Try the SciChart Demo.
JavaScript Polar Spline Line Chart
Try the JavaScript Polar Spline Line Chart example to see SciChart's GPU-accelerated rendering in action. Choose a cubic spline or polar interpolation. View demo.
JavaScript Multi Cycle-Polar Line Example
Create a JavaScript Multi-Cycle Polar Chart to plot data over multiple cycles and visualize patterns over time. This example shows surface temperature by month.
JavaScript Polar Column | Polar Bar
Try the JavaScript Polar Column or Bar Chart example to render bars in a polar layout with gradient fills and animations. Use SciChart for seamless integrations.
JavaScript Polar Column Category Chart
Create a JavaScript Polar Colum Category chart visualizing UK consumer price changes. Try the demo with a custom positive/negative threshold fill and stroke.
JavaScript Polar Range Column Chart
Create a JavaScript Polar Range Column Chart with SciChart. This example displays monthly minimum and maximum temperatures within a Polar layout. Try the demo.
JavaScript Windrose Plot | Polar Stacked Radial Column Chart
View the JavaScript Windrose Chart example to display directional data with stacked columns in a polar layout. Try the polar chart demo with customizable labels
JavaScript Polar Sunburst Chart
See the JavaScript Sunburst Chart example with multiple levels, smooth animation transitions and dynamically updating segment colors. Try the SciChart demo.
JavaScript Polar Radial Column Chart
View the JavaScript Radial Column Chart example to see the difference that SciChart has to offer. Switch radial and angular axes and add interactive modifiers.
JavaScript Stacked Radial Column Chart | Stacked Radial Bar Chart
This JavaScript Stacked Radial Bar Chart example shows Olympic medal data by country. Try the demo for yourself with async initialization and theme application.
JavaScript Polar Area Chart | Polar Mountain Chart
The JavaScript Polar Area Chart example, also known as Nightingale Rose Chart, renders an area series with polar coordinates with interactive legend controls.
JavaScript Polar Stacked Radial Mountain Chart
Try the JavaScript Stacked Radial Mountain Chart example to show multiple datasets on a polar layout with a stacked mountain series and animated transitions.
JavaScript Polar Band | Polar Error Bands Chart
Create a JavaScript Polar Chart with regular and interpolated error bands. Enhance a standard chart with shaded areas to show upper and lower data boundaries.
JavaScript Polar Scatter Chart
Build a JavaScript Polar Scatter Chart with this example to render multiple scatter series on radial and angular axes. Try the flexible SciChart demo today.
JavaScript Polar Radar Chart
View the JavaScript Polar Radar Chart example. Also known as the Spider Radar Chart, view the scalability and stability that SciChart has to offer. Try demo.
JavaScript Gauge Charts
Create JavaScript Gauge Charts, including a JavaScript Circular Gauge Dashboard, with user-friendly initialization and responsive design. Give SciChart a go.
JavaScript Polar Uniform Heatmap Chart
Try SciChart's JavaScript Polar Heatmap example to combine a polar heatmap with a legend component. Supports responsive design and chart and legend separation.
JavaScript Polar Heatmap | B-Mode Image Ultrasound | Medical Heatmap
No description available for this example yet
JavaScript Polar Partial Arc
Create a JavaScript Polar Partial Arc that bends from a full Polar Circle to a Cartesian-like arc. Try the demo to display an arc segment with Polar coordinates.
JavaScript Polar Axis Label Modes
Create a JavaScript Polar Axis Label with SciChart. This demo shows the various label modes for Polar Axes – all optimised for pan, zoom, and mouse wheel.
JavaScript Polar Map Example
View the React Polar Map Example using the SciChartReact component. Display geographic data as color-coded triangles on a polar coordinate system. Try demo.