JavaScript Bubble Chart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114

import {
    XyDataSeries,
    XyzDataSeries,
    NumericAxis,
    FastBubbleRenderableSeries,
    SciChartSurface,
    NumberRange,
    EllipsePointMarker,
    EFillPaletteMode,
    EStrokePaletteMode,
    IPointMarkerPaletteProvider,
    TPointMarkerArgb,
    IRenderableSeries,
    IPointMetadata,
    MouseWheelZoomModifier,
    ZoomExtentsModifier,
    ZoomPanModifier,
    parseColorToUIntArgb,
    SplineLineRenderableSeries,
    SweepAnimation,
} from "scichart";

import { appTheme } from "./appTheme";

export const drawExample = async (rootElement: string | HTMLDivElement) => {
    // Create a SciChartSurface with X,Y Axis
    const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
        theme: appTheme.SciChartJsTheme,
    });
    sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
    sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { growBy: new NumberRange(0.05, 0.05) }));

    // Create some data
    const xValues = [];
    const yValues = [];
    const zValues = [];
    let prevYValue = 0;
    for (let i = 0; i < 20; i++) {
        const curYValue = Math.sin(i) * 10 + 5;
        const size = Math.sin(i) * 60 + 3;

        xValues.push(i);
        yValues.push(prevYValue + curYValue);
        zValues.push(size);

        prevYValue += curYValue;
    }

    // Create and add a line series to the chart
    sciChartSurface.renderableSeries.add(
        new SplineLineRenderableSeries(wasmContext, {
            dataSeries: new XyDataSeries(wasmContext, { xValues, yValues }),
            stroke: appTheme.PaleSkyBlue,
            strokeThickness: 3,
            animation: new SweepAnimation({ duration: 500 }),
        })
    );

    // Create and add a Bubble series to the chart
    // The Bubble series requires a special dataseries type called XyzDataSeries with X,Y and Z (size) values
    sciChartSurface.renderableSeries.add(
        new FastBubbleRenderableSeries(wasmContext, {
            dataSeries: new XyzDataSeries(wasmContext, { xValues, yValues, zValues }),
            // Pointmarker defines the marker shown per-bubble point. This will be scaled according to z-value
            pointMarker: new EllipsePointMarker(wasmContext, {
                width: 64,
                height: 64,
                strokeThickness: 0,
                fill: appTheme.VividSkyBlue + "77",
            }),
            // Optional: Allows per-point colouring of bubble stroke
            paletteProvider: new BubblePaletteProvider(appTheme.VividOrange),
            animation: new SweepAnimation({ delay: 200, duration: 500, fadeEffect: true }),
        })
    );

    // Add some zooming and panning behaviour
    sciChartSurface.chartModifiers.add(new ZoomPanModifier({ enableZoom: true }));
    sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());
    sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());

    sciChartSurface.zoomExtents();
    return { sciChartSurface, wasmContext };
};

/**
 * Optional: An example PaletteProvider which implements IPointMarkerPaletteProvider
 * This can be attached to Scatter or Bubble series to change the stroke or fill
 * of the series point-markers conditionally
 */
class BubblePaletteProvider implements IPointMarkerPaletteProvider {
    public readonly fillPaletteMode = EFillPaletteMode.SOLID;
    public readonly strokePaletteMode: EStrokePaletteMode = EStrokePaletteMode.SOLID;
    private readonly fillArgb: number;

    constructor(fillHexString: string) {
        this.fillArgb = parseColorToUIntArgb(fillHexString);
    }

    public onAttached(parentSeries: IRenderableSeries): void {}

    public onDetached(): void {}

    public overridePointMarkerArgb(
        xValue: number,
        yValue: number,
        index: number,
        opacity?: number,
        metadata?: IPointMetadata
    ): TPointMarkerArgb {
        return xValue >= 8 && xValue <= 12 ? { fill: this.fillArgb, stroke: this.fillArgb } : undefined;
    }
}