JavaScript Chart Data Point Selection

1import {
2    SciChartSurface,
3    NumericAxis,
4    NumberRange,
5    XyDataSeries,
6    DataPointSelectionModifier,
7    DataPointSelectionChangedArgs,
8    DataPointInfo,
9    DataPointSelectionPaletteProvider,
10    SplineLineRenderableSeries,
11    EPointMarkerType,
12    AUTO_COLOR,
13    TextAnnotation,
14    EHorizontalAnchorPoint,
15    ECoordinateMode,
16    LegendModifier,
17    LineSeriesDataLabelProvider,
18    DataLabelState,
19    ELegendPlacement,
20} from "scichart";
21import { appTheme } from "../../../theme";
22
23// Generate some data for the example
24const dataSize = 30;
25const xValues: number[] = [];
26const yValues: number[] = [];
27const y1Values: number[] = [];
28const y2Values: number[] = [];
29const y3Values: number[] = [];
30const y4Values: number[] = [];
31for (let i = 0; i < dataSize; i++) {
32    xValues.push(i);
33    y4Values.push(Math.random());
34    y3Values.push(Math.random() + 1);
35    y2Values.push(Math.random() + 1.8);
36    y1Values.push(Math.random() + 2.5);
37    yValues.push(Math.random() + 3.6);
38}
39
40export const drawExample = async (
41    rootElement: string | HTMLDivElement,
42    setSelectedPoints: (selectedPoints: DataPointInfo[]) => void
43) => {
44    const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
45        theme: appTheme.SciChartJsTheme,
46    });
47
48    sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
49    sciChartSurface.yAxes.add(
50        new NumericAxis(wasmContext, {
51            growBy: new NumberRange(0.1, 0.1),
52        })
53    );
54
55    // Stroke/fill for selected points
56    const stroke = appTheme.ForegroundColor;
57    const fill: string = appTheme.PaleSkyBlue + "77";
58
59    // Optional: show datalabels but only for selected points
60    const getDataLabelProvider = () => {
61        const dataLabelProvider = new LineSeriesDataLabelProvider();
62        dataLabelProvider.style = { fontFamily: "Arial", fontSize: 13 };
63        dataLabelProvider.color = appTheme.ForegroundColor;
64        dataLabelProvider.getText = (state: DataLabelState) => {
65            return state.getMetaData()?.isSelected
66                ? `x,y [${state.xValues.get(state.index).toFixed(1)}, ` +
67                      `${state.yValues.get(state.index).toFixed(1)}] selected`
68                : "";
69        };
70        return dataLabelProvider;
71    };
72
73    // Add some series onto the chart for selection
74    sciChartSurface.renderableSeries.add(
75        new SplineLineRenderableSeries(wasmContext, {
76            id: "Series1",
77            dataSeries: new XyDataSeries(wasmContext, { xValues, yValues, dataSeriesName: "First Series" }),
78            pointMarker: {
79                type: EPointMarkerType.Ellipse,
80                options: { fill: AUTO_COLOR, stroke: AUTO_COLOR, strokeThickness: 3, width: 20, height: 20 },
81            },
82            strokeThickness: 3,
83            // Optional visual feedback for selected points can be provided by the DataPointSelectionPaletteProvider
84            // When dataSeries.metadata[i].isSelected, this still is applied
85            paletteProvider: new DataPointSelectionPaletteProvider({ stroke, fill }),
86            // Optional: show datalabels but only for selected points
87            dataLabelProvider: getDataLabelProvider(),
88        })
89    );
90
91    sciChartSurface.renderableSeries.add(
92        new SplineLineRenderableSeries(wasmContext, {
93            id: "Series2",
94            dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: y1Values, dataSeriesName: "Second Series" }),
95            pointMarker: {
96                type: EPointMarkerType.Ellipse,
97                options: { fill: AUTO_COLOR, stroke: AUTO_COLOR, strokeThickness: 3, width: 20, height: 20 },
98            },
99            strokeThickness: 3,
100            // Optional visual feedback for selected points
101            paletteProvider: new DataPointSelectionPaletteProvider({ stroke, fill }),
102            // Optional: show datalabels but only for selected points
103            dataLabelProvider: getDataLabelProvider(),
104        })
105    );
106
107    sciChartSurface.renderableSeries.add(
108        new SplineLineRenderableSeries(wasmContext, {
109            id: "Series3",
110            dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: y2Values, dataSeriesName: "Third Series" }),
111            pointMarker: {
112                type: EPointMarkerType.Ellipse,
113                options: { fill: AUTO_COLOR, stroke: AUTO_COLOR, strokeThickness: 3, width: 20, height: 20 },
114            },
115            strokeThickness: 3,
116            // Optional visual feedback for selected points
117            paletteProvider: new DataPointSelectionPaletteProvider({ stroke, fill }),
118            // Optional: show datalabels but only for selected points
119            dataLabelProvider: getDataLabelProvider(),
120        })
121    );
122
123    sciChartSurface.renderableSeries.add(
124        new SplineLineRenderableSeries(wasmContext, {
125            id: "Series4",
126            dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: y3Values, dataSeriesName: "Fourth Series" }),
127            pointMarker: {
128                type: EPointMarkerType.Ellipse,
129                options: { fill: AUTO_COLOR, stroke: AUTO_COLOR, strokeThickness: 3, width: 20, height: 20 },
130            },
131            strokeThickness: 3,
132            // Optional visual feedback for selected points
133            paletteProvider: new DataPointSelectionPaletteProvider({ stroke, fill }),
134            // Optional: show datalabels but only for selected points
135            dataLabelProvider: getDataLabelProvider(),
136        })
137    );
138
139    // Todo: Show how to programmatically set points. Requires some changes in scichart.js API
140
141    // Add title annotations
142    sciChartSurface.annotations.add(
143        new TextAnnotation({
144            text: "Click & Drag Select points",
145            fontSize: 20,
146            textColor: appTheme.ForegroundColor,
147            x1: 0.5,
148            opacity: 0.77,
149            horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
150            xCoordinateMode: ECoordinateMode.Relative,
151            yCoordinateMode: ECoordinateMode.Relative,
152        })
153    );
154
155    sciChartSurface.annotations.add(
156        new TextAnnotation({
157            text: "Try single click, CTRL+CLICK & Drag to select",
158            fontSize: 16,
159            textColor: appTheme.ForegroundColor,
160            x1: 0.5,
161            yCoordShift: 40,
162            opacity: 0.77,
163            horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
164            xCoordinateMode: ECoordinateMode.Relative,
165            yCoordinateMode: ECoordinateMode.Relative,
166        })
167    );
168
169    // Add a legend to the chart
170    sciChartSurface.chartModifiers.add(new LegendModifier({ placement: ELegendPlacement.BottomLeft }));
171
172    // Add the DataPointSelectonModifier to the chart.
173    // selectionChanged event / callback has the selected points in the arguments
174    const dataPointSelection = new DataPointSelectionModifier();
175    dataPointSelection.selectionChanged.subscribe((data: DataPointSelectionChangedArgs) => {
176        // When points are selected, set them - we render the selected points to a table below the chart
177        setSelectedPoints(data.selectedDataPoints);
178    });
179    sciChartSurface.chartModifiers.add(dataPointSelection);
180
181    return { wasmContext, sciChartSurface };
182};
183