Is it possible to use Plotly.js in a C# Winforms WebBrowser component?

Question

I am attempting to use Plotly.js in a C# Winforms desktop application from within a WebBrowser toolbox component for the sake of seamlessness, and am having some difficulties. The code is loaded into the component by assigning the literal string to WebBrowser.DocumentText property.

Specifically, I get the following error when the program is run: "Plotly is undefined." The same code, when pasted into a file called index.html, loads and runs correctly in a FireFox browser window when double-clicked. Must be something REALLY simple and newbie or just ignorant.

Here are the contents of the index.html file:

<html>
<head>
<script src = 'plotly-latest.min.js'></script>
</head>
<body>
<div id = "myDiv"></div>
<script>
var myDiv = document.getElementById('myDiv');
var trace = {
x : [9,8,5,1],
y : [1,2,4,8],
z : [11,8,15,3],
mode : 'lines' };
var data = [trace];
Plotly.newPlot(myDiv, data);
</script>
</body>
<html>

Thanks for any assistance you might render (pun intended!).

score 1 · Accepted Answer · answered Dec 11 '18 at 04:57

1

WebBrowser control by default uses IE6 which is not compatible to Plotly.js. You can make it use IE11 to display your graph using windows registry. You can also do it in code if you need to distribute your app.

You also have an option of ditching WebBrowser control and use third party browser controls like CefSharp (free) or DotNetBrowser (commercial).

answered Dec 11 '18 at 04:57

imlokesh

2,506
2
22
26

Tried the CefSharp component, and it runs correctly (apparently) because I have some alerts in there, but get the same error !! in console message which I trapped. Nice try, though. I'll try the registry method next. – user7191223 Dec 11 '18 at 22:09
I tested your code after setting registry values to `00002af9` and it works fine. I did set script src to `https://cdn.plot.ly/plotly-latest.min.js` when testing. – imlokesh Dec 11 '18 at 23:09
Tried it again, using your src, and it worked this time. Thanks for your continued patience, matched only by my own perseverence...really WANTED to get this to work!! – user7191223 Dec 11 '18 at 23:25
Wonder what the problem is with using a local file...I'm sure that's just another hurdle !! – user7191223 Dec 11 '18 at 23:26
You can use `file://` link to load it from local folder. Checkout https://stackoverflow.com/a/7194956/1311748. Good luck! – imlokesh Dec 11 '18 at 23:45

score 1 · Answer 2 · answered Jan 19 '22 at 10:49

Maybe too old to answer but I just tried doing it like this and it seems to work for now:

Using the Plotly.NET package, make a chart and then use chart.SaveHTMLAs<> and give it a name. Then, with a webBrowser object navigate to that html.

Here is my code:

        Plotly.NET.GenericChart.GenericChart point3Dchart =  Plotly.NET.Chart3D.Chart.Point3D<int, int, int, int>(tuppList, "p");
        point3Dchart.SaveHtmlAs<int>("a", null);
        //point3Dchart.Show(); // Will open firefox
        webBrowser1.Navigate(@"C:\...\bin\Debug\a.html");

I'm unsure right now why the SaveHTMLAs is asking for <> but writing int seems to work!

score 0 · Answer 3 · answered Nov 23 '22 at 19:34

The WebBrowser .NET component is using Internet Explorer which, as other mention, probably cannot render modern JavaScript used by Plotly.js

For .NET you can use one of the following:

the WebView2 control which uses Edge to render the web page

WebView article

WebView2 component on NuGet

NuGet\Install-Package Microsoft.Web.WebView2
CefSharp - a .NET wrapper around the Chromium Embedded Framework (CEF) which uses Chromium engine to render pages (very similar with the engine used by the Chrome browser)

CefSharp github repository

CefSharp.WinForms package

NuGet\Install-Package CefSharp.WinForms

You can use your solution to make a page with JavaScript and load it in one the above webbrowser control or

you can use Plotly.NET to render Plotly directly from C#. Example:

        using Plotly.NET;
        using Plotly.NET.LayoutObjects;
        ...

        LinearAxis xAxis = new LinearAxis();
        xAxis.SetValue("title", "xAxis");
        xAxis.SetValue("showgrid", false);
        xAxis.SetValue("showline", true);

        LinearAxis yAxis = new LinearAxis();
        yAxis.SetValue("title", "yAxis");
        yAxis.SetValue("showgrid", false);
        yAxis.SetValue("showline", true);

        LinearAxis zAxis = new LinearAxis();
        zAxis.SetValue("title", "zAxis");
        zAxis.SetValue("showgrid", false);
        zAxis.SetValue("showline", true);

        Layout layout = new Layout();
        layout.SetValue("xaxis", xAxis);
        layout.SetValue("yaxis", yAxis);
        layout.SetValue("zaxis", zAxis);
        layout.SetValue("showlegend", true);

        List<Tuple<double, double, double>> p = new List<Tuple<double, double, double>>();

        foreach (var m in batch.Measurements)
        {
            var (_x, _y, _z) = m.GetCartesianCoordinates();
            p.Add(Tuple.Create(_x, _y, _z));
        }

        string plotHtmlFilePath = GetNewUniqueTempPath();

        Plotly.NET.Chart3D.Chart.Point3D<double, double, double, double>(p.ToArray())
            .WithLayout(layout)
            .SaveHtml(plotHtmlFilePath);

// using WebView2 control
            plotWebView.Source = new Uri(plotHtmlFilePath);

or it can open it for you in the default browser:

    Plotly.NET.Chart3D.Chart.Point3D<double, double, double, double>(p.ToArray())
        .WithLayout(layout)                
        .Show();

Is it possible to use Plotly.js in a C# Winforms WebBrowser component?

3 Answers3