Dump Plotly.Net

Argos · July 2023

Hello,

I'm using Plotly.Net for charts. It allows interactions like zooming and supports tooltips. Wouldn't it be great to support Dumping the output in LinqPad?

I think it will take some adjustments to the plotting engine to support this, which I would like to contribute. However, I'm stuck with the correct way to Dump the charts in LinqPad. Maybe someone can help me there.

At the moment, Plotly.Net generates complete HTML documents. This does not work with LinqPad (I think), and must be broken down.

I managed to Dump a chart from it's individual parts. This takes 4 steps:

Add Plotly.js from an URL
Add the custom JS script for the plot
Add a Div element for the script to plot into
Invoke the script

Util.HtmlHead.AddScriptFromUri("https://cdn.plot.ly/plotly-2.21.0.min.js");
Util.HtmlHead.AddScript(script);
Util.RawHtml(html).Dump("Chart");
Util.InvokeScript(false, "renderPlotly_f5d66a84bf964fd1afcf5cf86cf68509");

This works fine from within a LinqPad script, where Util can be accessed.

My question is, how would one implement this in the Plotly.Net library without any reference to LinqPad?

I found in the documentation, that I can Dump the RawHtml as

return new XElement("LINQPad.HTML",
      new XElement("div", new XAttribute("id", "f5d66a84-bf96-4fd1-afcf-5cf86cf68509"))
  );

I guess I could use Reflection to invoke the other methods. Does anyone have a better idea?

Thanks for any hints or suggestions
Peter

stephensmitchell · July 2023

Several methods but If you're using LINQPad 7 you should try out the IFrame control:

var tempFile = Path.Combine(Path.GetTempPath(), $"{Guid.NewGuid()}.html");
var chart =
    Chart.Point<int, int, string>(
        x: Enumerable.Range(0, 11),
        y: Enumerable.Range(0, 11)
    );

chart.SaveHtml(tempFile);

File.ReadAllText(tempFile).Dump("Chart html");
//File.Delete(tempFile);


new IFrame(File.ReadAllText(tempFile), autoSize: true).Dump("iframe - html");


new IFrame(new Uri(tempFile)).Dump("iframe - web page");

stephensmitchell · July 2023

Or a better option maybe to use WebView2 and dump it:

http://share.linqpad.net/kdhhjl.linq

stephensmitchell · July 2023

I think you can use the html directly instead of writing it to file first in both cases. But maybe I'm confusing Plotly with another library I used. IFrame ctrl and Webview both support html string as source.

Argos · July 2023

Hello Stephen,

thank you for your replies. Actually, I like the IFrame solution, since it allows for inline dumps. I think this is what i was looking for.

I don't think there is a public API for just returning an HTML string, yet - at least not in the C# API. But i will try to submit a pull request for that.

Thanks a lot
Peter

stephensmitchell · July 2023

Another Idea and solution I use when working with JavaScript libraries in LINQPad is to embed html and templatize the data.

Here is an example that should apply to any js library.

http://share.linqpad.net/3q6lra.linq

Argos · July 2023

That is also a good idea, but in this case the point of using Plotly.Net in first place is, not to use the low-level Java script API :-)

stephensmitchell · July 2023

Yes that example was meant to be generally useful.

kudi · February 2

FYI

https://github.com/plotly/Plotly.NET/releases/tag/4.2.0

This release makes Plotly.NET compatible with LINQPad.
Read more about this on the respective pull request.

Dump Plotly.Net

Comments