JavaScript Chart Data Animation
Demonstrates how to run Dataset Animations using SciChart.js, High Performance JavaScript Charts
drawExample.ts
index.html
vanilla.ts
theme.ts
1import {
2 SciChartSurface,
3 NumericAxis,
4 NumberRange,
5 EllipsePointMarker,
6 ScatterAnimation,
7 XyDataSeries,
8 PaletteFactory,
9 GradientParams,
10 Point,
11 FastLineRenderableSeries,
12 easing,
13} from "scichart";
14
15import { appTheme } from "../../../theme";
16
17export const drawExample = async (rootElement: string | HTMLDivElement) => {
18 // Create a SciChartSurface
19 const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
20 theme: appTheme.SciChartJsTheme,
21 });
22
23 const length = 120;
24
25 sciChartSurface.xAxes.add(
26 new NumericAxis(wasmContext, {
27 visibleRange: new NumberRange(0, length),
28 growBy: new NumberRange(0.1, 0.1),
29 })
30 );
31 sciChartSurface.yAxes.add(
32 new NumericAxis(wasmContext, {
33 visibleRange: new NumberRange(0, length),
34 growBy: new NumberRange(0.1, 0.1),
35 })
36 );
37
38 let xValues = Array.from(Array(length).keys());
39 let yValues = Array.from({ length }, () => Math.random() * length);
40
41 // Create a scatter series with some initial data
42 const scatterSeries = new FastLineRenderableSeries(wasmContext, {
43 dataSeries: new XyDataSeries(wasmContext, {
44 xValues,
45 yValues,
46 }),
47 strokeThickness: 2,
48 pointMarker: new EllipsePointMarker(wasmContext, {
49 width: 11,
50 height: 11,
51 fill: appTheme.VividSkyBlue,
52 strokeThickness: 0,
53 }),
54 paletteProvider: PaletteFactory.createGradient(
55 wasmContext,
56 new GradientParams(new Point(0, 0), new Point(1, 1), [
57 { offset: 0, color: "#36B8E6" },
58 { offset: 0.2, color: "#5D8CC2" },
59 { offset: 0.4, color: "#8166A2" },
60 { offset: 0.6, color: "#AE418C" },
61 { offset: 1.0, color: "#CA5B79" },
62 ]),
63 { enableStroke: true, enablePointMarkers: true, strokeOpacity: 0.67 }
64 ),
65 });
66 sciChartSurface.renderableSeries.add(scatterSeries);
67
68 // create a temp series for passing animation values
69 const animationSeries = new XyDataSeries(wasmContext);
70 // register this so it is deleted along with the main surface
71 sciChartSurface.addDeletable(animationSeries);
72 // Update data using data animations
73 let timerId: NodeJS.Timeout;
74
75 const animateData = () => {
76 xValues = xValues.map((x) => x + ((Math.random() - 0.5) * length) / 5);
77 yValues = yValues.map((y) => y + ((Math.random() - 0.5) * length) / 5);
78 // Set the values on the temp series
79 animationSeries.clear();
80 animationSeries.appendRange(xValues, yValues);
81 scatterSeries.runAnimation(
82 new ScatterAnimation({
83 duration: 1000,
84 ease: easing.outQuad,
85 // Do not create a new DataSeries here or it will leak and eventually crash.
86 dataSeries: animationSeries,
87 })
88 );
89
90 timerId = setTimeout(animateData, 1200);
91 };
92 timerId = setTimeout(animateData, 1000);
93
94 const startUpdate = () => {
95 timerId = setTimeout(animateData, 1000);
96 };
97
98 const stopUpdate = () => {
99 clearTimeout(timerId);
100 };
101
102 return { wasmContext, sciChartSurface, controls: { startUpdate, stopUpdate } };
103};
104Data Animation Example - JavaScript
Overview
The Data Animation Example demonstrates how to implement real-time dataset animations with SciChart.js using JavaScript. This example initializes a SciChartSurface asynchronously and dynamically updates chart data with smooth animated transitions, making it ideal for high-performance WebGL visualizations.
Technical Implementation
The chart is created by asynchronously initializing the SciChartSurface using async/await, a pattern explained in Async and Await in JavaScript. It configures NumericAxis objects with specific visible ranges set by NumberRange to control the chart axes. The data is managed through an XyDataSeries and rendered with a FastLineRenderableSeries, which incorporates a custom EllipsePointMarker for enhanced visual emphasis. Real-time data updates are achieved via a looping setTimeout function that adjusts the data and triggers a ScatterAnimation to animate these changes.
Features and Capabilities
This example highlights several advanced features and customizations: the use of dynamic, randomized data updates that enable smooth animated transitions; advanced styling with a gradient palette applied through PaletteFactory and gradient parameters; and custom point markers providing greater visual clarity. These capabilities are engineered for high-performance, real-time updates while ensuring efficient data handling.
Integration and Best Practices
Even though this implementation is in JavaScript, it adheres to best practices applicable across various frameworks. The asynchronous initialization ensures that the chart setup is non-blocking, as illustrated in the asynchronous patterns from Async and Await in JavaScript. The implementation also emphasizes proper resource management and cleanup, following resource management guidelines to prevent memory leaks by disposing of the SciChartSurface appropriately. Finally, developers can consult the Performance Tips & Tricks documentation to further optimize real-time dataset animations in their applications.
javascript Chart Examples & Demos
See Also: Animation API (4 Demos)
JavaScript Style Animation
Demonstrates how to run Style Transition Animations with JavaScript.
JavaScript Startup Animation
Demonstrates how to run Startup Animations with JavaScript.
JavaScript Generic Animation
Demonstrates how to run Generic Animation with JavaScript.
JavaScript Animated Bar Chart Example
Bring annual comparison data to life with the JavaScript Animated Bar Chart example from SciChart. This demo showcases top 10 tennis players from 1990 to 2024.