JavaScript Bubble Chart

1import {
2    XyDataSeries,
3    XyzDataSeries,
4    NumericAxis,
5    FastBubbleRenderableSeries,
6    SciChartSurface,
7    NumberRange,
8    EllipsePointMarker,
9    EFillPaletteMode,
10    EStrokePaletteMode,
11    IPointMarkerPaletteProvider,
12    TPointMarkerArgb,
13    IRenderableSeries,
14    IPointMetadata,
15    MouseWheelZoomModifier,
16    ZoomExtentsModifier,
17    ZoomPanModifier,
18    parseColorToUIntArgb,
19    SplineLineRenderableSeries,
20    SweepAnimation,
21} from "scichart";
22
23import { appTheme } from "../../../theme";
24
25export const drawExample = async (rootElement: string | HTMLDivElement) => {
26    // Create a SciChartSurface with X,Y Axis
27    const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
28        theme: appTheme.SciChartJsTheme,
29    });
30    sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
31    sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { growBy: new NumberRange(0.05, 0.05) }));
32
33    // Create some data
34    const xValues = [];
35    const yValues = [];
36    const zValues = [];
37    let prevYValue = 0;
38    for (let i = 0; i < 20; i++) {
39        const curYValue = Math.sin(i) * 10 + 5;
40        const size = Math.sin(i) * 60 + 3;
41
42        xValues.push(i);
43        yValues.push(prevYValue + curYValue);
44        zValues.push(size);
45
46        prevYValue += curYValue;
47    }
48
49    // Create and add a line series to the chart
50    sciChartSurface.renderableSeries.add(
51        new SplineLineRenderableSeries(wasmContext, {
52            dataSeries: new XyDataSeries(wasmContext, { xValues, yValues }),
53            stroke: appTheme.PaleSkyBlue,
54            strokeThickness: 3,
55            animation: new SweepAnimation({ duration: 500 }),
56        })
57    );
58
59    // Create and add a Bubble series to the chart
60    // The Bubble series requires a special dataseries type called XyzDataSeries with X,Y and Z (size) values
61    sciChartSurface.renderableSeries.add(
62        new FastBubbleRenderableSeries(wasmContext, {
63            dataSeries: new XyzDataSeries(wasmContext, { xValues, yValues, zValues }),
64            // Pointmarker defines the marker shown per-bubble point. This will be scaled according to z-value
65            pointMarker: new EllipsePointMarker(wasmContext, {
66                width: 64,
67                height: 64,
68                strokeThickness: 0,
69                fill: appTheme.VividSkyBlue + "77",
70            }),
71            // Optional: Allows per-point colouring of bubble stroke
72            paletteProvider: new BubblePaletteProvider(appTheme.VividOrange),
73            animation: new SweepAnimation({ delay: 200, duration: 500, fadeEffect: true }),
74        })
75    );
76
77    // Add some zooming and panning behaviour
78    sciChartSurface.chartModifiers.add(new ZoomPanModifier({ enableZoom: true }));
79    sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());
80    sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
81
82    sciChartSurface.zoomExtents();
83    return { sciChartSurface, wasmContext };
84};
85
86/**
87 * Optional: An example PaletteProvider which implements IPointMarkerPaletteProvider
88 * This can be attached to Scatter or Bubble series to change the stroke or fill
89 * of the series point-markers conditionally
90 */
91class BubblePaletteProvider implements IPointMarkerPaletteProvider {
92    public readonly fillPaletteMode = EFillPaletteMode.SOLID;
93    public readonly strokePaletteMode: EStrokePaletteMode = EStrokePaletteMode.SOLID;
94    private readonly fillArgb: number;
95
96    constructor(fillHexString: string) {
97        this.fillArgb = parseColorToUIntArgb(fillHexString);
98    }
99
100    public onAttached(parentSeries: IRenderableSeries): void {}
101
102    public onDetached(): void {}
103
104    public overridePointMarkerArgb(
105        xValue: number,
106        yValue: number,
107        index: number,
108        opacity?: number,
109        metadata?: IPointMetadata
110    ): TPointMarkerArgb {
111        return xValue >= 8 && xValue <= 12 ? { fill: this.fillArgb, stroke: this.fillArgb } : undefined;
112    }
113}
114