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;
};
- Kelly Chan asked 2 years ago
- last edited 2 years ago
- You must login to post comments
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
- Andrew Burnett-Thompson answered 2 years ago
- last edited 2 years ago
-
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.
-
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.
-
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 login to post comments
Please login first to submit.