Trendline, Moving Average and Ratio Filters
Demonstrates how use Linear Trend, Moving Average and Ratio Filters with filter chaining, using SciChart.js, High Performance JavaScript Charts
drawExample.ts
index.html
vanilla.ts
RandomWalkGenerator.ts
theme.ts
1import { appTheme } from "../../../theme";
2import { RandomWalkGenerator } from "../../../ExampleData/RandomWalkGenerator";
3
4import {
5 EAxisAlignment,
6 ECoordinateMode,
7 EHorizontalAnchorPoint,
8 EVerticalAnchorPoint,
9 ELegendOrientation,
10 ELegendPlacement,
11 NumberRange,
12 TextAnnotation,
13 FastLineRenderableSeries,
14 LegendModifier,
15 MouseWheelZoomModifier,
16 NumericAxis,
17 SciChartSurface,
18 XyDataSeries,
19 XyLinearTrendFilter,
20 XyMovingAverageFilter,
21 XyRatioFilter,
22 XyScaleOffsetFilter,
23 ZoomExtentsModifier,
24 ZoomPanModifier,
25 NativeTextAnnotation,
26 EWrapTo,
27 EMultiLineAlignment,
28} from "scichart";
29
30const RATIO_YAXIS_ID = "RatioYAxisId";
31
32export const drawExample = async (rootElement: string | HTMLDivElement) => {
33 const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
34 theme: appTheme.SciChartJsTheme,
35 });
36
37 sciChartSurface.xAxes.add(
38 new NumericAxis(wasmContext, {
39 axisTitle: "X Axis",
40 })
41 );
42
43 sciChartSurface.yAxes.add(
44 new NumericAxis(wasmContext, {
45 axisAlignment: EAxisAlignment.Left,
46 axisTitle: "Original Data Y Axis",
47 growBy: new NumberRange(0.1, 0.1),
48 })
49 );
50
51 sciChartSurface.yAxes.add(
52 new NumericAxis(wasmContext, {
53 axisAlignment: EAxisAlignment.Right,
54 axisTitle: "Ratio Axis",
55 id: RATIO_YAXIS_ID,
56 growBy: new NumberRange(0.1, 0.1),
57 visibleRange: new NumberRange(-20, 20),
58 })
59 );
60
61 // Create an original Data Series with some X,Y data
62 const data1 = new RandomWalkGenerator().Seed(420).getRandomWalkSeries(500);
63 const originalDataSeries = new XyDataSeries(wasmContext, {
64 xValues: data1.xValues,
65 yValues: data1.yValues,
66 dataSeriesName: "Original",
67 });
68 sciChartSurface.renderableSeries.add(
69 new FastLineRenderableSeries(wasmContext, {
70 strokeThickness: 3,
71 stroke: appTheme.VividSkyBlue,
72 dataSeries: originalDataSeries,
73 })
74 );
75
76 // Compute a moving average using filters API and apply to the chart
77 sciChartSurface.renderableSeries.add(
78 new FastLineRenderableSeries(wasmContext, {
79 stroke: appTheme.VividRed,
80 strokeThickness: 3,
81 dataSeries: new XyMovingAverageFilter(originalDataSeries, {
82 length: 10,
83 dataSeriesName: "Moving Average (10)",
84 }),
85 })
86 );
87
88 // Compute a moving average using filters API and apply to the chart
89 sciChartSurface.renderableSeries.add(
90 new FastLineRenderableSeries(wasmContext, {
91 stroke: appTheme.VividOrange,
92 strokeThickness: 3,
93 dataSeries: new XyMovingAverageFilter(originalDataSeries, {
94 length: 20,
95 dataSeriesName: "Moving Average (20)",
96 }),
97 })
98 );
99
100 // Compute an offset of the original series
101 const offsetSeries = new XyScaleOffsetFilter(originalDataSeries, {
102 offset: -0.5,
103 scale: 2,
104 dataSeriesName: "Offset -0.5 / Scaled x2",
105 });
106 sciChartSurface.renderableSeries.add(
107 new FastLineRenderableSeries(wasmContext, {
108 stroke: appTheme.VividSkyBlue + "33",
109 strokeThickness: 3,
110 dataSeries: offsetSeries,
111 })
112 );
113
114 // Compute a trendline
115 sciChartSurface.renderableSeries.add(
116 new FastLineRenderableSeries(wasmContext, {
117 stroke: appTheme.MutedPurple,
118 strokeDashArray: [3, 3],
119 strokeThickness: 3,
120 dataSeries: new XyLinearTrendFilter(originalDataSeries, { dataSeriesName: "Linear Trendline" }),
121 })
122 );
123
124 // Compute a ratio between the trendline & the original series
125 sciChartSurface.renderableSeries.add(
126 new FastLineRenderableSeries(wasmContext, {
127 strokeThickness: 3,
128 stroke: appTheme.MutedRed,
129 yAxisId: RATIO_YAXIS_ID,
130 dataSeries: new XyRatioFilter(originalDataSeries, {
131 divisorSeries: offsetSeries,
132 dataSeriesName: "Ratio (Original vs. Offset)",
133 }),
134 })
135 );
136
137 // Add a title over the chart with information
138 sciChartSurface.annotations.add(
139 new NativeTextAnnotation({
140 x1: 0.02,
141 y1: 0.02,
142 xCoordinateMode: ECoordinateMode.Relative,
143 yCoordinateMode: ECoordinateMode.Relative,
144 horizontalAnchorPoint: EHorizontalAnchorPoint.Left,
145 verticalAnchorPoint: EVerticalAnchorPoint.Top,
146 fontSize: 18,
147 opacity: 0.55,
148 textColor: appTheme.ForegroundColor,
149 text: "SciChart.js supports dynamic transforms like Moving Averages, Trendlines, Ratios",
150 wrapTo: EWrapTo.ViewRect,
151 multiLineAlignment: EMultiLineAlignment.Left,
152 })
153 );
154
155 // Optional: add some chartmodifiers for interaction and to show the legend
156 sciChartSurface.chartModifiers.add(
157 new MouseWheelZoomModifier(),
158 new ZoomPanModifier({ enableZoom: true }),
159 new ZoomExtentsModifier(),
160 new LegendModifier({ placement: ELegendPlacement.BottomLeft, orientation: ELegendOrientation.Horizontal })
161 );
162
163 return { sciChartSurface, wasmContext };
164};
165Trendline, Moving Average and Ratio Filters in JavaScript
Overview
This example demonstrates how to integrate SciChart.js with a JavaScript application to create a high-performance financial chart that applies dynamic data transformations. It showcases advanced technical analysis filters including Moving Average, Linear Trendline and Ratio filters, while also configuring dual y-axes for displaying both the original and transformed data.
Technical Implementation
The chart is initialized asynchronously using SciChart.js’s native asynchronous API, where a WebAssembly context is created by calling SciChartSurface.create and loading Wasm. Data is generated using a random walk generator and then processed through several filters, including two distinct Moving Average filters with different lengths, an offset and scale filter, a Linear Trendline filter, and finally, a Ratio filter that computes the ratio between the original data series and its transformed version. The filter chaining demonstrates how multiple data transformations can be applied step-by-step as described in the Transforming Data with Filters documentation.
Features and Capabilities
The implementation includes several advanced features such as:
- Dual y-axis configuration to clearly distinguish between original data and ratio values, following best practices outlined in the Tutorial 08 - Adding Multiple Axis guide.
- Interactive chart modifiers like MouseWheelZoomModifier, ZoomPanModifier, ZoomExtentsModifier and a LegendModifier that enhance user interactivity. More details on these can be found in the MouseWheelZoomModifier Documentation.
- Annotations using the NativeTextAnnotation to overlay descriptive text with relative coordinates, adding additional context to the chart.
Integration and Best Practices
The example demonstrates best practices for integrating SciChart.js into a JavaScript project. Developers can follow the step-by-step asynchronous initialization process as detailed in the Getting Started with SciChart JS guide. Furthermore, resource cleanup is handled through a destructor function that properly disposes of chart objects, ensuring efficient memory management as recommended in the Memory Best Practices | JavaScript Chart Documentation. This implementation not only highlights the usage of dynamic filter chaining and dual-axis configuration, but also shows how to optimize performance when working with WebAssembly-powered charts.
javascript Chart Examples & Demos
See Also: Transforming Data with Filters (3 Demos)
Custom Filters
Demonstrates simple and advanced Custom Filters for data transformation and aggregation, with realtime updates
Realtime Percentage Change using Filter
How to use a ScaleOffsetFilter to convert data to a percentage change, with realtime updates, rescale on pan
JavaScript Mountain Chart Draggable Thresholds
Demonstrates how to add draggable thresholds which change the series color in the chart in SciChart.js