JavaScript Style Animation
Demonstrates how to run Style Transition Animations using SciChart.js, High Performance JavaScript Charts
drawExample.ts
index.tsx
theme.ts
1import {
2 MouseWheelZoomModifier,
3 ZoomExtentsModifier,
4 ZoomPanModifier,
5 XyyDataSeries,
6 NumericAxis,
7 FastBandRenderableSeries,
8 SciChartSurface,
9 NumberRange,
10 IRenderableSeries,
11 BandAnimation,
12} from "scichart";
13import { appTheme } from "../../../theme";
14
15// Colours used for style 1
16const lineColor1 = appTheme.VividOrange;
17const fillColor1 = appTheme.VividOrange + "33";
18const lineColor2 = appTheme.VividSkyBlue;
19const fillColor2 = appTheme.VividSkyBlue + "33";
20
21// Colurs used for style 2
22const lineColor1b = appTheme.VividPink;
23const fillColor1b = appTheme.VividPink + "33";
24const lineColor2b = appTheme.PaleTeal;
25const fillColor2b = appTheme.PaleTeal + "33";
26
27const POINTS = 100;
28const STEP = (3 * Math.PI) / POINTS;
29
30export const drawExample = async (rootElement: string | HTMLDivElement) => {
31 // create a chart with X, Y axis
32 const { wasmContext, sciChartSurface } = await SciChartSurface.create(rootElement, {
33 theme: appTheme.SciChartJsTheme,
34 });
35 sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
36 sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { growBy: new NumberRange(0.2, 0.2) }));
37
38 // Generate some data
39 let xValues: number[] = [];
40 let yValues: number[] = [];
41 let y1Values: number[] = [];
42 for (let x = 0; x <= POINTS; x++) {
43 const k = 1 - x / 2000;
44 const y = Math.sin(x * STEP) * k * 0.7 + 1;
45 const y1 = Math.cos(x * STEP) * k + 1;
46 xValues.push(x);
47 yValues.push(y);
48 y1Values.push(y1);
49 }
50 // Create a band series with the data and initial stroke/fill colours
51 const bandSeries = new FastBandRenderableSeries(wasmContext, {
52 dataSeries: new XyyDataSeries(wasmContext, { xValues, yValues, y1Values }),
53 strokeThickness: 4,
54 stroke: lineColor1,
55 strokeY1: lineColor2,
56 fill: fillColor1,
57 fillY1: fillColor2,
58 });
59 sciChartSurface.renderableSeries.add(bandSeries);
60
61 // create a temp series for passing animation values
62 const animationSeries = new XyyDataSeries(wasmContext);
63 // register this so it is deleted along with the main surface
64 sciChartSurface.addDeletable(animationSeries);
65 // Animate both the data & the style of the chart, using a style animation
66 const animateChartStyle = (isStyle1: boolean) => {
67 xValues = [];
68 yValues = [];
69 y1Values = [];
70
71 // Depending on the flag passed in, change the data. Just for eye candy
72 if (isStyle1) {
73 for (let x = 0; x <= POINTS; x++) {
74 const k = 1 - x / 2000;
75 const y = Math.sin(x * STEP) * k * 0.7 + 1;
76 const y1 = Math.cos(x * STEP) * k + 1;
77 xValues.push(x);
78 yValues.push(y);
79 y1Values.push(y1);
80 }
81 } else {
82 for (let x = 0; x <= POINTS; x++) {
83 const k = 1 - x / 2000;
84 const y = Math.cos(x * STEP) * k * 0.7 + 1;
85 const y1 = Math.sin(x * STEP) * k + 1;
86 xValues.push(x);
87 yValues.push(y);
88 y1Values.push(y1);
89 }
90 }
91 // Set the values on the temp series
92 animationSeries.clear();
93 animationSeries.appendRange(xValues, yValues, y1Values);
94
95 // Running an animation on the series lets you change data as well as styles
96 bandSeries.runAnimation(
97 new BandAnimation({
98 duration: 1000,
99 styles: {
100 strokeThickness: isStyle1 ? 4 : 8,
101 stroke: isStyle1 ? lineColor1 : lineColor1b,
102 strokeY1: isStyle1 ? lineColor2 : lineColor2b,
103 fill: isStyle1 ? fillColor1 : fillColor1b,
104 fillY1: isStyle1 ? fillColor2 : fillColor2b,
105 },
106 // Don't create a new dataSeries here or it will leak and crash if run repeatedly
107 dataSeries: animationSeries,
108 })
109 );
110 };
111 // Add some interactivity modifiers
112 sciChartSurface.chartModifiers.add(
113 new ZoomExtentsModifier(),
114 new ZoomPanModifier({ enableZoom: true }),
115 new MouseWheelZoomModifier()
116 );
117
118 setTimeout(() => animateChartStyle(false), 1000);
119 setTimeout(() => animateChartStyle(true), 3000);
120
121 sciChartSurface.zoomExtents();
122
123 return { wasmContext, sciChartSurface, controls: { animateChartStyle } };
124};
125Style Animation - JavaScript
Overview
This example, "Style Animation", demonstrates how to implement dynamic style transition animations using SciChart.js with JavaScript. It focuses on animating both the data and visual properties of a band series to provide high-performance, real-time updates.
Technical Implementation
The implementation begins with asynchronous initialization of the SciChartSurface using a WebAssembly context, as detailed in the Creating a new SciChartSurface and loading Wasm guide. Numeric axes are set up with custom NumberRange values, and data is generated using trigonometric functions in a standard JavaScript loop. A FastBandRenderableSeries is then created with an XyyDataSeries, and the style animation is executed through the runAnimation method of the BandAnimation class. This process smoothly transitions properties such as stroke, fill, and stroke thickness over a 1000ms duration, aligning with the techniques described in the Style Transition Animations documentation.
Features and Capabilities
Key features of this example include real-time updates of both chart data and styles, interactive enhancements such as ZoomExtentsModifier, ZoomPanModifier, and MouseWheelZoomModifier modifiers, and efficient memory management by registering disposable data series via addDeletable in SciChartSurface. The configuration of the band series is aligned with the best practices highlighted within the The Band Series type guide.
Integration and Best Practices
By relying solely on JavaScript, this example demonstrates how to integrate SciChart.js efficiently without additional frameworks or helpers. Developers are encouraged to follow the asynchronous initialization methods using WebAssembly for optimal performance and to use built-in interactive modifiers to boost user interactivity. Moreover, the example’s approach to managing temporary data via SciChartSurface.addDeletable() reflects recommended Memory Best Practices in SciChart.js. This ensures that resources are managed effectively even during intensive animation operations.
javascript Chart Examples & Demos
See Also: Animation API (4 Demos)
JavaScript Chart Data Animation
Demonstrates how to run Dataset 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.