Dynamic Layout Showcase

1import {
2    SciChartSurface,
3    NumericAxis,
4    EAxisAlignment,
5    NumberRange,
6    FastLineRenderableSeries,
7    XyDataSeries,
8    AUTO_COLOR,
9    SweepAnimation,
10    ZoomExtentsModifier,
11    MouseWheelZoomModifier,
12    ZoomPanModifier,
13    RolloverModifier,
14} from "scichart";
15import { RandomWalkGenerator } from "../../../ExampleData/RandomWalkGenerator";
16import { GridLayoutModifier } from "./GridLayoutModifier";
17
18export const drawExample = async (rootElement: string | HTMLDivElement) => {
19    // Create a SciChartSurface
20    const { wasmContext, sciChartSurface } = await SciChartSurface.create(rootElement);
21
22    // Create an XAxis and YAxis
23    sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
24    sciChartSurface.yAxes.add(
25        new NumericAxis(wasmContext, {
26            axisAlignment: EAxisAlignment.Left,
27            growBy: new NumberRange(0.05, 0.05),
28        })
29    );
30
31    const POINTS = 1000;
32    for (let i = 0; i < 10; i++) {
33        // Create arrays of x, y values (just arrays of numbers)
34        const { xValues, yValues } = new RandomWalkGenerator().getRandomWalkSeries(POINTS);
35
36        // Create a Series and add to the chart
37        sciChartSurface.renderableSeries.add(
38            new FastLineRenderableSeries(wasmContext, {
39                dataSeries: new XyDataSeries(wasmContext, { xValues, yValues, dataSeriesName: `Series ${i + 1}` }),
40                stroke: AUTO_COLOR,
41                strokeThickness: 3,
42                animation: new SweepAnimation({ duration: 500, fadeEffect: true }),
43            })
44        );
45    }
46
47    // Optional: Add some interactivity to the chart
48    sciChartSurface.chartModifiers.add(
49        new ZoomExtentsModifier({ modifierGroup: "chart" }),
50        new MouseWheelZoomModifier({ modifierGroup: "chart" }),
51        new ZoomPanModifier({ modifierGroup: "chart" }),
52        new RolloverModifier({ modifierGroup: "chart" })
53    );
54
55    const glm = new GridLayoutModifier();
56    sciChartSurface.chartModifiers.add(glm);
57
58    sciChartSurface.zoomExtents();
59
60    const setIsGridLayoutMode = (value: boolean) => {
61        glm.isGrid = value;
62    };
63
64    return { wasmContext, sciChartSurface, setIsGridLayoutMode };
65};
66