JavaScript Startup Animation
Demonstrates how to run Startup Animations using SciChart.js, High Performance JavaScript Charts
drawExample.ts
index.html
vanilla.ts
theme.ts
1import {
2 WaveAnimation,
3 SweepAnimation,
4 ScaleAnimation,
5 FadeAnimation,
6 TextAnnotation,
7 GenericAnimation,
8 SciChartSurface,
9 NumericAxis,
10 FastBubbleRenderableSeries,
11 EllipsePointMarker,
12 XyzDataSeries,
13 SplineLineRenderableSeries,
14 XyDataSeries,
15 ECoordinateMode,
16 EHorizontalAnchorPoint,
17 EVerticalAnchorPoint,
18 SeriesAnimation,
19 ZoomPanModifier,
20 ZoomExtentsModifier,
21 MouseWheelZoomModifier,
22} from "scichart";
23import { appTheme } from "../../../theme";
24
25// Four Series Animations are defined below. We apply these to the chart sequentially
26const waveAnimation = new WaveAnimation({ zeroLine: 0, pointDurationFraction: 0.5, duration: 1000, fadeEffect: true });
27const sweepAnimation = new SweepAnimation({ duration: 1000 });
28const scaleAnimation = new ScaleAnimation({ duration: 1000, zeroLine: 0 });
29const fadeAnimation = new FadeAnimation({ duration: 1000 });
30
31// generic animation to create typewritter effect on the watermark
32const typeWriterAnimation = (textAnnotation: TextAnnotation, finalText: string) =>
33 new GenericAnimation<string>({
34 from: "",
35 to: finalText,
36 onAnimate: (from: string, to: string, progress: number) => {
37 const length = Math.floor(to.length * progress);
38 textAnnotation.text = to.substring(0, length);
39 },
40 duration: 1000,
41 setInitialValueImmediately: true,
42 });
43
44// Setup the example & chart
45
46export const drawExample = async (rootElement: string | HTMLDivElement) => {
47 // Create a SciChartSurface with theme
48 const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
49 theme: appTheme.SciChartJsTheme,
50 });
51 // Create X and Y Axis
52 sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
53 sciChartSurface.yAxes.add(new NumericAxis(wasmContext));
54
55 // Create some data
56 const xValues = [];
57 const yValues = [];
58 const zValues = [];
59 let prevYValue = 0;
60 for (let i = 0; i < 20; i++) {
61 const curYValue = Math.sin(i) * 10 + 5;
62 const size = Math.sin(i) * 60 + 3;
63
64 xValues.push(i);
65 yValues.push(prevYValue + curYValue);
66 zValues.push(size);
67
68 prevYValue += curYValue;
69 }
70
71 // Create a Bubble Series
72 const bubbleSeries = new FastBubbleRenderableSeries(wasmContext, {
73 pointMarker: new EllipsePointMarker(wasmContext, {
74 width: 64,
75 height: 64,
76 fill: appTheme.VividSkyBlue + "77",
77 strokeThickness: 0,
78 }),
79 dataSeries: new XyzDataSeries(wasmContext, { xValues, yValues, zValues }),
80 });
81 sciChartSurface.renderableSeries.add(bubbleSeries);
82
83 // Create a Line Series
84 const lineSeries = new SplineLineRenderableSeries(wasmContext, {
85 stroke: appTheme.VividSkyBlue,
86 strokeThickness: 2,
87 opacity: 0.7,
88 dataSeries: new XyDataSeries(wasmContext, { xValues, yValues }),
89 });
90 sciChartSurface.renderableSeries.add(lineSeries);
91
92 // Add watermark annotation
93 const watermark = new TextAnnotation({
94 text: "",
95 x1: 0.5,
96 y1: 0.5,
97 fontSize: 42,
98 opacity: 0.5,
99 xCoordinateMode: ECoordinateMode.Relative,
100 yCoordinateMode: ECoordinateMode.Relative,
101 horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
102 verticalAnchorPoint: EVerticalAnchorPoint.Center,
103 });
104 sciChartSurface.annotations.add(watermark);
105
106 // Add title annotation
107 sciChartSurface.annotations.add(
108 new TextAnnotation({
109 text: "Series Startup Animations in SciChart.js",
110 fontSize: 18,
111 textColor: appTheme.ForegroundColor,
112 x1: 0.5,
113 y1: 0,
114 opacity: 0.77,
115 horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
116 xCoordinateMode: ECoordinateMode.Relative,
117 yCoordinateMode: ECoordinateMode.Relative,
118 })
119 );
120
121 // Loop forever and update animations
122 let animationState = 0;
123 const updateAnimation = () => {
124 let currentAnimation: SeriesAnimation;
125 switch (animationState) {
126 case 0:
127 currentAnimation = waveAnimation;
128 sciChartSurface.addAnimation(typeWriterAnimation(watermark, "Wave Animation"));
129 animationState++;
130 break;
131 case 1:
132 currentAnimation = sweepAnimation;
133 sciChartSurface.addAnimation(typeWriterAnimation(watermark, "Sweep Animation"));
134 animationState++;
135 break;
136 case 2:
137 currentAnimation = scaleAnimation;
138 sciChartSurface.addAnimation(typeWriterAnimation(watermark, "Scale Animation"));
139 animationState++;
140 break;
141 case 3:
142 currentAnimation = fadeAnimation;
143 sciChartSurface.addAnimation(typeWriterAnimation(watermark, "Fade Animation"));
144 animationState = 0;
145 break;
146 }
147 lineSeries.enqueueAnimation(currentAnimation);
148 bubbleSeries.enqueueAnimation(currentAnimation);
149 // Loop forever while SciChartSurface is not deleted (see React Component unmount)
150 if (!sciChartSurface.isDeleted) setTimeout(updateAnimation, 2000);
151 };
152
153 updateAnimation();
154
155 sciChartSurface.chartModifiers.add(new ZoomPanModifier({ enableZoom: true }));
156 sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());
157 sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
158 return { wasmContext, sciChartSurface };
159};
160JavaScript Startup Animation - JavaScript
Overview
This example demonstrates how to implement a series of startup animations using SciChart.js in a JavaScript environment. The primary goal is to sequentially animate two types of renderable series—a bubble series and a spline line series—by applying four distinct animations: Wave, Sweep, Scale, and Fade. A custom typewriter effect is also created for a watermark annotation to display the current animation effect. This example showcases interactive chart modifiers for zooming and panning, ensuring a smooth and engaging user experience.
Technical Implementation
The chart is initialized by creating a SciChartSurface with numeric axes through an asynchronous function, utilizing the async/await pattern for proper resource initialization. Data for the chart is generated dynamically and fed into two renderable series using the standard SciChart.js data series objects. Animations are managed by enqueuing them on the renderable series and are cycled continuously via a looping mechanism implemented with setTimeout. A custom animation, based on the GenericAnimation class, is used to create a typewriter text effect. Developers looking to understand the fundamentals of startup animations in this framework may refer to the JavaScript Startup Animation - SciChart documentation for detailed guidance.
Features and Capabilities
The example highlights several advanced features of SciChart.js such as real-time animation chaining and dynamic data binding. By sequentially applying different series animations, the visual entrance effects become more engaging. Interactive chart modifiers like ZoomPanModifier, ZoomExtentsModifier, and MouseWheelZoomModifier are incorporated to provide enhanced user interactivity. Performance is further optimized by leveraging the underlying WebAssembly contexts, as detailed in the Performance Tips & Tricks documentation.
Integration and Best Practices
Although parts of the example are integrated into a React component for demonstration purposes, the JavaScript implementation in the provided files is standalone and can be easily embedded into a basic HTML file. The design emphasizes clear separation of concerns through proper lifecycle management, ensuring that the SciChartSurface is appropriately deleted when no longer needed, as highlighted in the Getting Started with SciChart JS guide. Developers are encouraged to follow these best practices for resource cleanup and performance optimization, which are critical for building high-performance web applications. For additional interactive behavior, refer to the Tutorial 03 - Adding Zooming, Panning Behavior that explains how to integrate zoom and pan modifiers effectively.
javascript Chart Examples & Demos
See Also: Animation API (4 Demos)
JavaScript Chart Data Animation
Demonstrates how to run Dataset Animations with JavaScript.
JavaScript Style Animation
Demonstrates how to run Style Transition 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.