Third Party Plot in NI G WEB

[RezaAB]

Hi all,

I want to use plotly.js Plotly 
Do you know how to use one of the plot from Plotly.js in my NI G Web program?
I found example that call Plotly in this link https://github.com/rajsite/webvi-experiments, however I did not understand how to call the plot and ....

https://haliatech.com/

[MishaKharitonov]

I recently found the NI XY Chart shipped with G Web Development was not performant enough for the quantity of data required to be plotted for a web application we're developing for a customer. 

Plotly was by far the best option I found for 3rd party libraries, and I now have integrated plotly.js easily using static files called via the JavaScript Interface.

First add the script reference to the html source of the page you wish to display plots on using official release URLs or local script reference i.e.

src="support/js/plotly-2.24.1.min.js" charset="utf-8"

Size the HTML Placeholder Container on the front panel for the page. Set a unique html class attribute on the control such as 'plotly-graph'.

In the javascript file defining the creation of the plot(s) you wish to create, get the html element using a DOM accessor function such as window.GetElementByClassName('plotly-graph')[0].

Create a JSLI javascript global referencing your javascript file and assign input arguments used to configure the graph as inputs.

For my purposes I need to configure multiple plots/traces on the graph at once. To do this, I flatten the value of the ni datagrid I use to configure the plots on my graph to a JSON string and use that as an input. In the javascript function executing my plotly generation, JSON.Parse() is used to unflatten this string back to an object.

To call the plotly javascript function, place the JSLI reference on the block diagram in your gweb page. 

Mikhail Kharitonov

Project Engineer

Bloomy Controls Inc.

[Harman234]

Are you able to see the plot when you run the website in G Web itself? My plot shows up when I run it in the browser, but when I want to debug in G Web the plot doesn't show up and I get errors.

[MishaKharitonov]

Just tried this out, and the script called to initialize my plotly graph in the HTML Placeholder Container executes without error. However, my web application relies on HTTP requests so I cannot test drawing plots while running directly in G Web. What errors are you getting instead of the Plotly graph rendering?

[MilanR · Accepted solution]

I updated the webvi-experiments Plotly example so that all the library does is load plotly, handle control resizing, and returns a plotly div reference. The WebApp shows how to the use the plotly div reference with the plotly functions. The example does require you to write JavaScript and use the JSLI but it at least looks very similar to the plotly.js online examples. The example runs in the G Web editor as well as with the Run in browser command.

I attached the example to the post, hopefully it's a useful starting point!

[Harman234]

Thank you! Have you ever tried to get this to work with graph.js? G Web seems to error out (saying syntax error in graph.js even though it works in the browser)

[RezaAB]

Hi all,

I already found solution for my problem. 
Instead of Plotly.js, I use Chart.js.
I use this link as reference Using Chart.js in LabVIEW NXG Web Module  .
By using that program I can edit properties of the chart quite easy using cluster on G Web.

Reza.
Certified LabVIEW Developer (CLD)