Dump Plotly.Net

Argos

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

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

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

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

stephensmitchell

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

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

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

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

Yes that example was meant to be generally useful.

kudi

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.