JavaScript Fan Chart

1import { getVarianceData } from "./data";
2import { appTheme } from "../../../theme";
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 const drawExample = async (rootElement: string | HTMLDivElement) => {
24    // Create a SciChartSurface
25    const { wasmContext, sciChartSurface } = await SciChartSurface.create(rootElement, {
26        theme: appTheme.SciChartJsTheme,
27    });
28
29    // Add an XAxis, YAxis
30    sciChartSurface.xAxes.add(new NumericAxis(wasmContext, { labelFormat: ENumericFormat.Date_DDMMYYYY }));
31    sciChartSurface.yAxes.add(new NumericAxis(wasmContext));
32
33    // Generates some data for the example as an array of TVarPoint: {
34    //     date: number;
35    //     actual: number;
36    //     varMax: number;
37    //     var4: number;
38    //     var3: number;
39    //     var2: number;
40    //     var1: number;
41    //     varMin: number;
42    // }
43    const varianceData = getVarianceData();
44
45    // To render the fan chart, we use a Line Chart with XyDataSeries
46    // and three Band charts with XyyDataSeries
47    const actualDataSeries = new XyDataSeries(wasmContext);
48    const variance3DataSeries = new XyyDataSeries(wasmContext);
49    const variance2DataSeries = new XyyDataSeries(wasmContext);
50    const variance1DataSeries = new XyyDataSeries(wasmContext);
51
52    actualDataSeries.appendRange(
53        varianceData.map((v) => v.date),
54        varianceData.map((v) => v.actual)
55    );
56    variance3DataSeries.appendRange(
57        varianceData.map((v) => v.date),
58        varianceData.map((v) => v.varMin),
59        varianceData.map((v) => v.varMax)
60    );
61    variance2DataSeries.appendRange(
62        varianceData.map((v) => v.date),
63        varianceData.map((v) => v.var1),
64        varianceData.map((v) => v.var4)
65    );
66    variance1DataSeries.appendRange(
67        varianceData.map((v) => v.date),
68        varianceData.map((v) => v.var2),
69        varianceData.map((v) => v.var3)
70    );
71
72    // Add a line series with the Xy data (the actual data)
73    // Note use FastLineRenderableSeries for non-spline version
74    sciChartSurface.renderableSeries.add(
75        new SplineLineRenderableSeries(wasmContext, {
76            strokeThickness: 2,
77            dataSeries: actualDataSeries,
78            stroke: appTheme.VividPink,
79            animation,
80        })
81    );
82
83    // Add band series with progressively higher opacity for the fan variance data
84    // Note use FastBandRenderableSeries for non-spline version
85    sciChartSurface.renderableSeries.add(
86        new SplineBandRenderableSeries(wasmContext, {
87            dataSeries: variance3DataSeries,
88            opacity: 0.15,
89            fill: appTheme.VividPink,
90            strokeY1: "#00000000",
91            animation,
92        })
93    );
94    sciChartSurface.renderableSeries.add(
95        new SplineBandRenderableSeries(wasmContext, {
96            dataSeries: variance2DataSeries,
97            opacity: 0.33,
98            fill: appTheme.VividPink,
99            strokeY1: "#00000000",
100            animation,
101        })
102    );
103    sciChartSurface.renderableSeries.add(
104        new SplineBandRenderableSeries(wasmContext, {
105            dataSeries: variance1DataSeries,
106            opacity: 0.5,
107            fill: appTheme.VividPink,
108            strokeY1: "#00000000",
109            animation,
110        })
111    );
112
113    // Optional: Add some interactivity modifiers
114    sciChartSurface.chartModifiers.add(
115        new ZoomExtentsModifier(),
116        new ZoomPanModifier({ enableZoom: true }),
117        new MouseWheelZoomModifier(),
118        new ZoomExtentsModifier()
119    );
120
121    // Optional: Add some annotations (text) to show detail
122    sciChartSurface.annotations.add(
123        new TextAnnotation({
124            x1: varianceData[0].date,
125            y1: varianceData[0].actual,
126            verticalAnchorPoint: EVerticalAnchorPoint.Bottom,
127            yCoordShift: -50,
128            text: "Actual data",
129            opacity: 0.45,
130            textColor: appTheme.ForegroundColor,
131        })
132    );
133
134    sciChartSurface.annotations.add(
135        new TextAnnotation({
136            x1: varianceData[5].date,
137            y1: varianceData[5].actual,
138            text: "Forecast Variance",
139            verticalAnchorPoint: EVerticalAnchorPoint.Top,
140            yCoordShift: 50,
141            opacity: 0.45,
142            textColor: appTheme.ForegroundColor,
143        })
144    );
145
146    sciChartSurface.zoomExtents();
147    return { wasmContext, sciChartSurface };
148};
149