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 textColor: appTheme.TextColor
104 });
105 sciChartSurface.annotations.add(watermark);
106
107 // Add title annotation
108 sciChartSurface.annotations.add(
109 new TextAnnotation({
110 text: "Series Startup Animations in SciChart.js",
111 fontSize: 18,
112 textColor: appTheme.ForegroundColor,
113 x1: 0.5,
114 y1: 0,
115 opacity: 0.77,
116 horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
117 xCoordinateMode: ECoordinateMode.Relative,
118 yCoordinateMode: ECoordinateMode.Relative,
119 })
120 );
121
122 // Loop forever and update animations
123 let animationState = 0;
124 const updateAnimation = () => {
125 let currentAnimation: SeriesAnimation;
126 switch (animationState) {
127 case 0:
128 currentAnimation = waveAnimation;
129 sciChartSurface.addAnimation(typeWriterAnimation(watermark, "Wave Animation"));
130 animationState++;
131 break;
132 case 1:
133 currentAnimation = sweepAnimation;
134 sciChartSurface.addAnimation(typeWriterAnimation(watermark, "Sweep Animation"));
135 animationState++;
136 break;
137 case 2:
138 currentAnimation = scaleAnimation;
139 sciChartSurface.addAnimation(typeWriterAnimation(watermark, "Scale Animation"));
140 animationState++;
141 break;
142 case 3:
143 currentAnimation = fadeAnimation;
144 sciChartSurface.addAnimation(typeWriterAnimation(watermark, "Fade Animation"));
145 animationState = 0;
146 break;
147 }
148 lineSeries.enqueueAnimation(currentAnimation);
149 bubbleSeries.enqueueAnimation(currentAnimation);
150 // Loop forever while SciChartSurface is not deleted (see React Component unmount)
151 if (!sciChartSurface.isDeleted) setTimeout(updateAnimation, 2000);
152 };
153
154 updateAnimation();
155
156 sciChartSurface.chartModifiers.add(new ZoomPanModifier({ enableZoom: true }));
157 sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());
158 sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
159 return { wasmContext, sciChartSurface };
160};
161JavaScript 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.