Search code examples
javascriptc#node.jsobservablehqclearscript

How to use observablehq/plot from .NET 5 app?


Our team intends to use JavaScript library observablehq/plot from an app written in C# and running on .NET 5. As a proof of concept, we were able to successfully use that library running in a separate process on Node.js. The downside of this approach is that we would need to implement all data serialization and inter-process communication ourselves, and we would need to bundle Node.js in our app installer. We are looking for an alternative approach that would not require Node.js, but instead would directly host V8 JavaScript engine in our .NET app. Currently, we are considering using ClearScript package for that. While we were able to successfully run simple JavaScript code using it, we discovered that observablehq/plot and its dependencies use some APIs that are present in Node.js, but are apparently unavailable in ClearScript out-of-the-box (it seems that Node.js implements some of those APIs in JavaScript, and some in C++). Making those implementations available to ClearScript running in .NET app looks like a significant task whose cost I cannot estimate at this point.

I would like to ask if anyone had to solve the same or similar problem, and what approach would you recommend? Is there an easy way to make all necessary APIs available to observablehq/plot running on ClearScript? Should I consider hosting Chromium/Edge browser engine in the .NET app instead? I haven’t yet tried this, but I assume it is possible because my understanding (correct me if I’m wrong) is that WebView2 control can be used in WPF apps running on .NET, and it is implemented using Chromium and V8 JavaScript engine. Is there any other approach you can recommend?


Update: The app GUI is built on Avalonia and SkiaSharp. It is possible that eventually we will choose another charting library, perhaps, one not written in JavaScript. But my task at hand is specifically to investigate whether and how we can use JavaScript libraries in our app, taking observablehq/plot as an example, and investigate its features and performance characteristics.


Solution

  • If you are building a WPF desktop app you should try a WPF based chart library that feats your needs.

    Open source libraries:

    1. OxyPlot
    2. InteractiveDataDisplay
    3. ScottPlot support pan and zoom.

    Paid libraries:

    1. Telerik RadChart
    2. DevExpress

    More info about WPF charts in this post.

    If you are using Blazor WebAssembly:

    Use jsRuntime and JSObjectReference to import and call your Javascript observablehp library.

    If you are using Xamarin.Forms the best professional library out there is probably SyncFusion:

    1. Syncfusion Charts

    Update:

    Avalonia Framework only will support this through a webview / embedded browser as you stated above. Here you have 3 options:

    1. Cefnet is a .NET CLR binding for the Chromium Embedded Framework
    2. CefGlue same than above
    3. WebView Avaloria-CefGlue

    For more usefull tools and libraries to use with Avalonia please refer to Awesome Avalonia.