Pre loader

How to run sciChart JS in Server Side Blazor

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums

Answered
1
0

I’ve been trying to implement the scichart js blazor wrapper in a serverside application. The chart starts to load, but gives the following error:
Failed to load resource: the server responded with a status of 404 () :5001/scichart2d.data:1

it looks like scichart2d.data is in the wrong place, but as far as I can tell it’s where it should be (in wwwroot).

is there something special I need to do in sever side? I can get it working fine in webAssembly Blazor

Version
JS 1.3
Images
  • You must to post comments
Best Answer
1
0

I did manage to get this working.

v2+ allows you to use:
SciChartSurface.useWasmFromCDN()

I have also been working on a SciChart JS Blazor wrapper using the builder functionality.

It’s still a work in progress but feel free to check it out.

  • You must to post comments
Good Answer
1
0

Hi Michael,

There is a full sample here on how to setup webpack to copy the wasm and data files to the output directly in a Blazor app:

SciChart.js Blazor Boilerplate

In particular, see the file which sets up webpack here.

Something else that might help you. It is now possible to load the wasm & data files for SciChart.js from a CDN. This behaviour was added in v1.3 (see release note):

Loading the SciChart.js Wasm from CDN

We have added a new API to SciChart.js to allow you to specify where to load the WebAssembly (wasm) file from. Currently, this must be in the local directory on your server or deployed via WebPack as shown in our tutorial #1 – Setting up a SciChart.js project with WebPack.

With SciChart.js 1.3.1514 or above you can specify the URL of the WebAssembly file. We publish SciChart.js to npm but also to a global CDN. Use this syntax to specify loading the wasm file from URL. Be sure to set the version number to match the scichart.js version number if you use our CDN!

// Load the SciChart.js WebAssembly (Wasm) File from a specific URL
// Example below is for cdn.jsdeliver which we publish to 
SciChart.SciChartSurface.configure({
    dataUrl: "https://cdn.jsdelivr.net/npm/[email protected]/_wasm/scichart2d.data",
    wasmUrl: "https://cdn.jsdelivr.net/npm/[email protected]/_wasm/scichart2d.wasm"
});

Note the version number in the URL.

I’m also working now on server-side nodejs loading of SciChart and working through similar solutions. If the above doesn’t work let me know and we can see if we can help further.

Best regards,
Andrew

  • Michael Hollas
    Thanks Andrew, I tried to add this to the .js that i’m using (it’s modified from the blazor example in the boilerplate), but it doesn’t seem to be working. export async function init(element) { SciChartSurface.configure({ dataUrl: “https://cdn.jsdelivr.net/npm/[email protected]/_wasm/scichart2d.data”, wasmUrl: “https://cdn.jsdelivr.net/npm/[email protected]/_wasm/scichart2d.wasm” }); let { sciChartSurface, wasmContext } = resolveContext(element); if (sciChartSurface === undefined) { const newContext = await SciChartSurface.create(element.id); sciChartSurface = newContext.sciChartSurface; wasmContext = newContext.wasmContext; chartInstances[element.id] = { sciChartSurface, wasmContext }; sciChartSurface.chartModifiers.add(new ZoomPanModifier()); sciChartSurface.chartModifiers.add(new RubberBandXyZoomModifier()); sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier()) } } is there something I’m missing? here is my webpack.config.js: const path = require(“path”); const CopyPlugin = require(“copy-webpack-plugin”); const webpack = require(“webpack”); module.exports = { mode: “development”, entry: { sciChart: ‘./src/wrapper.js’ }, module: { rules: [] }, resolve: { extensions: [“.js”] }, output: { path: path.resolve(__dirname, ‘../’), filename: “[name].js”, library: “[name]” } }; and I’m running npm run build. Best, Mike
  • Michael Klishevich
    Hi Michael. This is the example where we load wasm from the CDN. I thought it might be useful as well. https://github.com/ABTSoftware/SciChart.JS.Examples/tree/master/Sandbox/demo-browser-global-module
  • Michael Hollas
    Thanks this helped a lot. Is it possible to get this api working with the new chartBuilder API?
  • You must to post comments
0
0

Hello Michael,
it may be due to the ‘.data’ being a non-standard file type, for which you will need to enable serving in your configs.
https://docs.microsoft.com/en-us/aspnet/core/fundamentals/static-files?view=aspnetcore-5.0#non-standard-content-types

BR,
Ivan

  • You must to post comments
0
0

Was this resolved? What was the answer? I ran into the same problem while setting up a Blazor server project.

  • You must to post comments
Showing 4 results
Your Answer

Please first to submit.