JavaScript Fan Chart

1import { appTheme } from "../../../theme";
2import { RandomWalkGenerator } from "../../../ExampleData/RandomWalkGenerator";
3
4import {
5    MouseWheelZoomModifier,
6    ZoomExtentsModifier,
7    ZoomPanModifier,
8    XyyDataSeries,
9    NumericAxis,
10    SciChartSurface,
11    XyDataSeries,
12    ENumericFormat,
13    WaveAnimation,
14    SplineLineRenderableSeries,
15    TextAnnotation,
16    EVerticalAnchorPoint,
17    SplineBandRenderableSeries,
18} from "scichart";
19// tslint:disable:max-line-length
20
21const animation = new WaveAnimation({ duration: 700, fadeEffect: true });
22
23export type TVarPoint = {
24    date: number;
25    actual: number;
26    varMax: number;
27    var4: number;
28    var3: number;
29    var2: number;
30    var1: number;
31    varMin: number;
32};
33
34export function getVarianceData(): TVarPoint[] {
35    const varianceData: TVarPoint[] = [];
36    const startDate = 1546300800; // 1st Jan 2019
37    const dateStep = 1546387200 - startDate; // one day;
38
39    const length: number = 10;
40    const yValues: number[] = new RandomWalkGenerator().Seed(923478).getRandomWalkSeries(length).yValues;
41    for (let i = 0; i < length; i++) {
42        const date = startDate + dateStep * i;
43
44        let varMax: number = NaN;
45        let var4: number = NaN;
46        let var3: number = NaN;
47        let var2: number = NaN;
48        let var1: number = NaN;
49        let varMin: number = NaN;
50
51        if (i > 4) {
52            varMax = yValues[i] + (i - 5) * 0.3;
53            var4 = yValues[i] + (i - 5) * 0.2;
54            var3 = yValues[i] + (i - 5) * 0.1;
55            var2 = yValues[i] - (i - 5) * 0.1;
56            var1 = yValues[i] - (i - 5) * 0.2;
57            varMin = yValues[i] - (i - 5) * 0.3;
58        }
59
60        varianceData.push({ date, actual: yValues[i], varMax, var4, var3, var2, var1, varMin });
61    }
62
63    return varianceData;
64}
65
66export const drawExample = async (rootElement: string | HTMLDivElement) => {
67    // Create a SciChartSurface
68    const { wasmContext, sciChartSurface } = await SciChartSurface.create(rootElement, {
69        theme: appTheme.SciChartJsTheme,
70    });
71
72    // Add an XAxis, YAxis
73    sciChartSurface.xAxes.add(new NumericAxis(wasmContext, { labelFormat: ENumericFormat.Date_DDMMYYYY }));
74    sciChartSurface.yAxes.add(new NumericAxis(wasmContext));
75
76    // Generates some data for the example as an array of TVarPoint: {
77    //     date: number;
78    //     actual: number;
79    //     varMax: number;
80    //     var4: number;
81    //     var3: number;
82    //     var2: number;
83    //     var1: number;
84    //     varMin: number;
85    // }
86    const varianceData = getVarianceData();
87
88    // To render the fan chart, we use a Line Chart with XyDataSeries
89    // and three Band charts with XyyDataSeries
90    const actualDataSeries = new XyDataSeries(wasmContext);
91    const variance3DataSeries = new XyyDataSeries(wasmContext);
92    const variance2DataSeries = new XyyDataSeries(wasmContext);
93    const variance1DataSeries = new XyyDataSeries(wasmContext);
94
95    actualDataSeries.appendRange(
96        varianceData.map((v) => v.date),
97        varianceData.map((v) => v.actual)
98    );
99    variance3DataSeries.appendRange(
100        varianceData.map((v) => v.date),
101        varianceData.map((v) => v.varMin),
102        varianceData.map((v) => v.varMax)
103    );
104    variance2DataSeries.appendRange(
105        varianceData.map((v) => v.date),
106        varianceData.map((v) => v.var1),
107        varianceData.map((v) => v.var4)
108    );
109    variance1DataSeries.appendRange(
110        varianceData.map((v) => v.date),
111        varianceData.map((v) => v.var2),
112        varianceData.map((v) => v.var3)
113    );
114
115    // Add a line series with the Xy data (the actual data)
116    // Note use FastLineRenderableSeries for non-spline version
117    sciChartSurface.renderableSeries.add(
118        new SplineLineRenderableSeries(wasmContext, {
119            strokeThickness: 2,
120            dataSeries: actualDataSeries,
121            stroke: appTheme.VividPink,
122            animation,
123        })
124    );
125
126    // Add band series with progressively higher opacity for the fan variance data
127    // Note use FastBandRenderableSeries for non-spline version
128    sciChartSurface.renderableSeries.add(
129        new SplineBandRenderableSeries(wasmContext, {
130            dataSeries: variance3DataSeries,
131            opacity: 0.15,
132            fill: appTheme.VividPink,
133            strokeY1: "#00000000",
134            animation,
135        })
136    );
137    sciChartSurface.renderableSeries.add(
138        new SplineBandRenderableSeries(wasmContext, {
139            dataSeries: variance2DataSeries,
140            opacity: 0.33,
141            fill: appTheme.VividPink,
142            strokeY1: "#00000000",
143            animation,
144        })
145    );
146    sciChartSurface.renderableSeries.add(
147        new SplineBandRenderableSeries(wasmContext, {
148            dataSeries: variance1DataSeries,
149            opacity: 0.5,
150            fill: appTheme.VividPink,
151            strokeY1: "#00000000",
152            animation,
153        })
154    );
155
156    // Optional: Add some interactivity modifiers
157    sciChartSurface.chartModifiers.add(
158        new ZoomExtentsModifier(),
159        new ZoomPanModifier({ enableZoom: true }),
160        new MouseWheelZoomModifier(),
161        new ZoomExtentsModifier()
162    );
163
164    // Optional: Add some annotations (text) to show detail
165    sciChartSurface.annotations.add(
166        new TextAnnotation({
167            x1: varianceData[0].date,
168            y1: varianceData[0].actual,
169            verticalAnchorPoint: EVerticalAnchorPoint.Bottom,
170            yCoordShift: -50,
171            text: "Actual data",
172            opacity: 0.45,
173            textColor: appTheme.ForegroundColor,
174        })
175    );
176
177    sciChartSurface.annotations.add(
178        new TextAnnotation({
179            x1: varianceData[5].date,
180            y1: varianceData[5].actual,
181            text: "Forecast Variance",
182            verticalAnchorPoint: EVerticalAnchorPoint.Top,
183            yCoordShift: 50,
184            opacity: 0.45,
185            textColor: appTheme.ForegroundColor,
186        })
187    );
188
189    sciChartSurface.zoomExtents();
190    return { wasmContext, sciChartSurface };
191};
192