SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components

0
0

I am using NextJS with the SciChart trial license for development and suddenly got the error “SciChart: WebGL not supported! ” with Chrome. It worked fine before, and I didn’t change any codes for launching the chart. Also, it works fine with Firefox. The chrome version I am using is 107.0.5304.107.

BTW, the error is gone after I restarted my computer. Is it possible to be related to memory issue?

Below are my codes for initializing the chart:

  const initSciChart = () => {   
    // LICENSING //
           SciChartSurface.setRuntimeLicenseKey("xxx");

           SciChartDefaults.enableResampling = true;
    SciChartDefaults.asyncLabels = true;
    SciChartDefaults.useSharedCache = true;

    drawSpecChart();
};

async function drawSpecChart() {
    // Create the SciChartSurface in the div 'scichart-root'
    // The SciChartSurface, and webassembly context 'wasmContext' are paired. This wasmContext
    // instance must be passed to other types that exist on the same surface.

    let xAxesNumberRange = new NumberRange(0, 18);
    let yAxesNumberRange = new NumberRange(-140, -40);

    const chartDefinition = {
        xAxes: [{
            type: EAxisType.NumericAxis,
            options: {
                axisTitle: "Frequency (GHz)",
                axisTitleStyle: {
                    fontSize: 12,
                    fontFamily: "sans-serif",
                    fontWeight: "bold"
                },
                labelStyle: {
                    fontSize: 12,
                    fontFamily: "sans-serif"
                },
                visibleRange: xAxesNumberRange,
                zoomExtentsRange: xAxesNumberRange,
                labelFormat: ENumericFormat.Decimal,
                labelPrecision: 6,
                cursorLabelFormat: ENumericFormat.Decimal,
                cursorLabelPrecision: 6,
                drawMajorBands: false,
            }
        }],
        yAxes: [{
            type: EAxisType.NumericAxis,
            options: {
                axisTitle: "Power (dBm)",
                axisTitleStyle: {
                    fontSize: 12,
                    fontFamily: "sans-serif",
                    fontWeight: "bold"
                },
                labelStyle: {
                    fontSize: 12,
                    fontFamily: "sans-serif"
                },
                autoTicks: false,
                majorDelta: 10,
                minorDelta: 5,
                axisAlignment: EAxisAlignment.Left,
                visibleRange: yAxesNumberRange,
                zoomExtentsRange: yAxesNumberRange,
                labelFormat: ENumericFormat.Decimal,
                labelPrecision: 2,
                cursorLabelFormat: ENumericFormat.Decimal,
                cursorLabelPrecision: 2,
                drawMajorBands: false,
            },
        }],
        series: [],
        modifiers: [
            { type: EChart2DModifierType.MouseWheelZoom },
            { 
                type: EChart2DModifierType.ZoomExtents,
                options: {
                    isAnimated: false
                }
            }
        ]
           };

       const { sciChartSurface, wasmContext } = await chartBuilder.build2DChart("scichart-root", chartDefinition);  

    xAxesNumberRange = null;
    yAxesNumberRange = null;
};
Version
2.2.2415
Images
  • You must to post comments
0
0

It’s entirely possible, we have seen strange errors happen if you run out of memory in browser.

You are returning { sciChartSurface, wasmContext } from your initialisation function.

  • Are you deleting the sciChartSurface when you are finished with it?
  • Are you creating new XyDataSeries at any point or swapping series? If so – old series must be deleted

Have a look at SciChart.js Documentation – The DataSeries API.

Deleting a DataSeries
Once you are finished with the DataSeries, don’t
forget to call IDeletable.delete(). This frees WebAssembly native
memory and releases it back to the operating system:

// Calling delete on a DataSeries releases its webassembly memory. This series is no longer usable
  xyDataSeries.delete();
  
  // Calling delete on a RenderableSeries will delete both the RenderableSeries and its dataseries.
  // This series is no longer usable
  const lineSeries = new FastLineRenderableSeries(wasmContext);
  lineSeries.delete();
  
  // Calling delete on a SciChartSurface will delete and free memory on all elements in this chart
  // This chart is no longer usable.
  const { wasmContext, sciChartSurface } = await SciChartSurface.create(divElementId);
  sciChartSurface.delete();
  

Failing to call IDeletable.delete() on a DataSeries or it’s parent SciChartSurface when it is no longer needed can result in a memory
leak.

To simplify your code, if you do not change DataSeries instances, you can call delete on the parent SciChartSurface once. This will delete all child objects that hold native memory.

The following types are IDeletable and must be deleted

  • IBrush2D
  • IPen2D
  • IRenderContext2D
  • IDataSeries
  • IChartModifierBase
  • IDataSeries3D
  • IBaseSceneEntity
  • IRenderableSeries3D
  • IEventSubscriptionItem
  • IPointMarker
  • ISeriesDrawingProvider
  • IAnnotation
  • ISciChartSurfaceBase
  • IRenderableSeries

If you create any type from the above (RenderableSeries, DataSreies, Axis, Annotation) it must be deleted when no longer used.

SciChartSurface.delete() will cascade and call .delete() on all child objects so you only need to do this once, however if you are swapping RenderableSeries, DataSeries, Axis or Annotations then ensure that items you remove from the chart are deleted.

Best regards,
Andrew

  • Kelly Chan
    Yes, I delete all those items when it’s no longer used or delete the SciChartSurface when unload the page. However, as it’s in development stage, sometimes the page hang and need to force reload without clearing those items properly. Is there any feature to clean up all the SciChart child objects and surface? So every time the page is loaded, I can clean up all the old SciChart objects.
  • Andrew Burnett-Thompson
    Can you share us code that reproduces this issue? As far as I know, page reload clears all memory anyway. Only need to .delete() when you’re dynamically changing content on the page.
  • Kelly Chan
    Thank Andrew! As it’s not always reproducible. I need sometimes to investigate this issue. Will let you know if I need your help.
  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.