2 steps to plot your ESAPI script data.

Hello!

In this article, I’ll show you how to plot data using simple HTML and JavaScript, then how to implement this pattern in C# to plot your ESAPI data.

Why are we using the browser?

Unfortunately 😓 there is nothing close to this in C#:

www.desmos.com

var x = new List<double>{1,2,3,4,5};
var y = new List<double>{2,4,6,8,10};
PlotLib.Plot(x,y);

WPF and Oxyplot would be the choices to plot in C#, however it is not recommended to use this pattern in a single file. And since we tend to avoid compiled scripts (binary plugins) or executable scripts, I think using HTML and JavaScript is an easy turnaround to solve this simple problem.

Pipeline:

The sequence is simple enough:

1. Think about the plot you need;
2. Emulate some data to feed the plot;
3. Code JavaScript and HTML;
4. Use C# to create a document containing JavaScript and HTML;
5. Feed data from ESAPI into the plain JavaScript and HTML;

Simple HTML and Simple JS to plot with Plot.ly

Let’s think about a 3D plot. It is not as easy as a 2D plot, it needs perspective, rendering, rotation … Seems like for us simple coders a tough task.

However, searching a bit in Google for 3D plot JavaScript, I’ve found Plot.ly.

Reading 1 minute of the documentation, I was able to render a 3D scatter Plot.

Below is all the code we need for our example. We referenced the library via CDN and got some boilerplate code.

Result for 3D scatter plot with Plot.ly JS

And with plot.ly you get all features for rotation, pan, zoom etc. It is as easy as can get.

C# do this HTML document for me please.

In visual studio, create a new .NET Framework Class Library solution.

Reference the VMS.TPS libraries (.dll) to be able to run the script.

Paste the following code in the main .cs file, rename it to PlotMU_SSD_Dmax.cs.

The code has 3 main scopes, one is responsible for gathering info from the ScriptContext: SSD, Metersets and MaxDose in percentage. Another is to create a static text with 3 lists (xs,ys,zs), that will be passed to the a runner that will start the file with the default program for .html files (the browser).

Run the script, searching for the folder where the solution is saved:

And !

Result for MU (X) SSD(Y) Dmax(Z)

This is a turnaround to perform easy plots in JavaScript from C# code. It is not the safest option.

And you can use the power of JavaScript and HTML to build reports, when learning WPF is not easy.