JavaScript Digital Band Chart

1import {
2    MouseWheelZoomModifier,
3    ZoomExtentsModifier,
4    ZoomPanModifier,
5    XyyDataSeries,
6    NumericAxis,
7    FastBandRenderableSeries,
8    SciChartSurface,
9    NumberRange,
10    SweepAnimation,
11} from "scichart";
12
13import { appTheme } from "../../../theme";
14
15export const drawExample = async (rootElement: string | HTMLDivElement) => {
16    // Create a SciChartSurface
17    const { wasmContext, sciChartSurface } = await SciChartSurface.create(rootElement, {
18        theme: appTheme.SciChartJsTheme,
19    });
20
21    // Create an XAxis and YAxis
22    sciChartSurface.xAxes.add(new NumericAxis(wasmContext, { axisTitle: "X Axis" }));
23    sciChartSurface.yAxes.add(
24        new NumericAxis(wasmContext, {
25            growBy: new NumberRange(0.4, 0.4),
26            axisTitle: "Y Axis",
27        })
28    );
29
30    // Create some data for the example. We need X, Y and Y1 values
31    const xValues = [];
32    const yValues = [];
33    const y1Values = [];
34    const POINTS = 50;
35    const STEP = (3 * Math.PI) / POINTS;
36    for (let i = 0; i <= POINTS; i++) {
37        const k = 1 - i / 100;
38        xValues.push(i);
39        yValues.push(Math.sin(i * STEP) * k * 0.7);
40        y1Values.push(Math.cos(i * STEP) * k);
41    }
42
43    // Create the band series and add to the chart
44    // The bandseries requires a special dataseries type called XyyDataSeries with X,Y and Y1 values
45    sciChartSurface.renderableSeries.add(
46        new FastBandRenderableSeries(wasmContext, {
47            dataSeries: new XyyDataSeries(wasmContext, { xValues, yValues, y1Values }),
48            strokeThickness: 3,
49            fill: appTheme.VividOrange + "33",
50            fillY1: appTheme.VividSkyBlue + "33",
51            stroke: appTheme.VividOrange,
52            strokeY1: appTheme.VividSkyBlue,
53            isDigitalLine: true,
54            animation: new SweepAnimation({ duration: 800 }),
55        })
56    );
57
58    // Optional: Add some interactivity modifiers
59    sciChartSurface.chartModifiers.add(
60        new ZoomExtentsModifier(),
61        new ZoomPanModifier({ enableZoom: true }),
62        new MouseWheelZoomModifier()
63    );
64
65    return { wasmContext, sciChartSurface };
66};
67