I am using SciChart with Next.js to create a real-time updated line chart. It works fine if there is 1 trace running with 130k datapoints. But when there are 4 traces (each with 130k datapoints) running in the chart, there is performance issue. After running for a while, this error is showing in the browser console:
“RangeError: Failed to execute ‘texImage2D’ on ‘WebGL2RenderingContext’: The ArrayBuffer/ArrayBufferView size exceeds the supported range.”
I tried to optimize the chart by following this page, but it doesn’t help on the lag issue.
https://www.scichart.com/documentation/js/current/Performance%20Tips.html
Here are my codes for updating the chart data:
if (SciChartSurface.renderableSeries.get(trace_num)) {
SciChartSurface.renderableSeries.get(trace_num).dataSeries = new XyDataSeries(WasmContext, { xValues: dataX, yValues: dataY });
} else {
const lineSeries = new FastLineRenderableSeries(WasmContext);
lineSeries.strokeThickness = 1;
lineSeries.stroke = tracesInfoRef[trace_num].color;
lineSeries.dataSeries = new XyDataSeries(WasmContext, { xValues: dataX, yValues: dataY, dataIsSortedInX: true, dataEvenlySpacedInX: true, containsNaN: false });
SciChartSurface.renderableSeries.add(lineSeries);
}
Can SciChart perform well with multiple traces which total datapoints larger than 500k? How can I fix the texImage2D error ?
- Kelly Chan asked 2 years ago
- last active 1 year ago
I tried to use the trial version of SciChart with Next.js. But I got “SciChartSurface.setRuntimeLicenseKey is not a function” error. I don’t know what’s wrong, could you provide guideline for using SciChart with Next.js?
These are the codes in my next.config.js:
const CopyPlugin = require("copy-webpack-plugin");
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
webpack: ( config, { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack } ) => {
config.plugins.push(
new CopyPlugin({
patterns: [
{ from: "node_modules/scichart/_wasm/scichart2d.data", to: "" },
{ from: "node_modules/scichart/_wasm/scichart2d.wasm", to: "" }
]
})
);
return config;
},
}
module.exports = nextConfig
And I have imported these files in pages/index.js
import {SciChartSurface} from "scichart/Charting/Visuals/SciChartSurface";
import {NumericAxis} from "scichart/Charting/Visuals/Axis/NumericAxis";
- Kelly Chan asked 2 years ago
- last active 2 years ago