LabVIEW Craft
  • Blog
  • About
  • Contact
  • Tools
  • Resources

Data Visualization with XControls & JavaScript

2/22/2017

11 Comments

 
Jon McBee
I recently needed to create a small LabVIEW application that would allow my customers to view and interact with data they had acquired.  As much as I love LabVIEW I really don't love trying to make sleek UI's for data visualization using LabVIEW.  So I decided to tinker with embedding JavaScript UI elements in LabVIEW front panels using XControls.  It ended up being more fun than it sounds.
Picture
Picture
I knew that I wanted a JavaScript charting package and so I did a little Googling and I found too many to count.  I decided to buy a canned package that had examples that fit what I wanted to do because there is no way that I could build what I wanted myself for $20 worth of effort.  I came across a package called Chartli on codecanyon for $20, it seemed to fit my use case so I purchased a license.
Picture
The tangible artifacts that I purchased were HTML files with JavaScript code, JavaScript files, and CSS files.  We don't typically deal with these types of artifacts as LabVIEW developers but there is no reason we can't.  In fact there is a nice example that ships with LabVIEW called "ActiveX Event Callback.vi", this example uses the Microsoft WebBrowser ActiveX control to load a webpage in the ActiveX control so that it can be embedded in a LabVIEW VI's front panel.  As luck would have it, the Chartli package I purchased was just a bunch of webpages that I could tweak and embed in an ActiveX Control.
Picture
So I now had a way to take the webpage component and view it on a LabVIEW VI's front panel using the ActiveX control.  Notice that the Web Page URL is actually pointing to a local file on my hard drive.  I don't even need to host the html file for the ActiveX control to be able to run it; and run it is the correct way to talk about it because when the HTML page is loaded it actually executes the JavaScript code embedded inside it.  This is cool because it gives me a way to use JavaScript to handle UI elements, which, let's be honest, look and act nicer than anything I want to build with LabVIEW.
So this is where the XControls come in.  If you aren't familiar with XControls in LabVIEW then take a look here.  I didn't need to build much functionality into my XControls because I was only using them to encapsulate my hackery of programmatically updating HTML files and refreshing the webpage in the ActiveX control.
To finish I will mention a few caveats.  These aren't speedy and I wouldn't use them for display of live data.  Their responsiveness suffers with large amounts of data, for this reason I ended up creating a hybrid LabVIEW chart HTML+JavaScript chart that allowed me to do visualization for decimation of the data in LabVIEW and then push a decimated set of data up to HTML+JavaScript for fancy viewing.  Another caveat is licensing, if you go the route I went and purchase code from someone else be sure that their license fits your use case.  In my case the license I purchased allows me to use this package once and distribute it to customers without selling it to them.  If you download the code I post then you inherit that license along with this text here:
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Jon McBee is the Founder and Managing Partner at Composed Systems and is a Certified LabVIEW Architect, Certified LabVIEW Embedded Developer, Certified TestStand Developer, an NI Certified Professional Instructor, a LabVIEW Champion, and a Certified ScrumMaster
data_vis_LV2016.zip
File Size: 3404 kb
File Type: zip
Download File

11 Comments
Andras
2/23/2017 10:27:26 am

What do you mean about large data? At which level this particular approach becomes sluggish? Example: i have 30 channels (curves), and I decimate my data not to exceed the number of pixels of my LabVIEW XY Graph, so lets say 700 data points. So lets imagine 30 curves multiplied by 700. If I push this amount of data, I guess that HTML+javascript chart should deal with it nicely? I am interested, because these charts just look so nice.

Reply
Jon McBee
2/23/2017 10:34:52 am

Hi Andras,

I was being a bit conservative with my phrasing in an effort to under promise and over deliver. With line plot I noticed that the zoom plot on the bottom was had a noticeable (yet still usable) lag when I plotted four traces, each trace having ~40,250 data points. It was sluggish but still usable, and once the range on the zoom plot was made smaller the lag went away. My guess is that you would be fine with 30 traces decimated to 700 points per trace.

I am looking into using https://www.zingchart.com/ as my charting package as it should be able to handle large data sets without any issues. I will probably end up writing some custom code using the zingchart package for my use case.

Reply
Andras
2/23/2017 11:31:59 am

Thanks for the info! I am just a "small player" (LV CLD cert), and almost zero experience with JavaScript/HTML. How easy to customize the line charts for example at the javascript side? Does this Chartli library has a good documentation with examples? I do not think of very fancy things, just some basic customizations, like the position of the Plots Legend, font types, etc...
Thanks!

Omar Mussa
2/23/2017 01:24:39 pm

Great post - I've done similar stuff recently. One thing I'd recommend is looking at plot.ly - it has a js library that is open source and also makes very nice looking plots.

Reply
Jon McBee
2/23/2017 04:01:18 pm

Hi Andras,

I apparently can't reply to a reply of a reply (whose blogsite is this anyways?). It won't be hard for you to get up to speed enough to modify the HTML files to fit your needs. You may have to do a little tinkering with the JavaScript code to add parameters but if you buy a license for Chartli the developer is very responsive to questions. Also feel free to check out other plotting and data visualization packages, you find a pretty well formed example that fits your needs prebuilt.

You're not a small player as long as you keep learning new things! There are no small players, just people who stop learning.

Reply
James McNally link
2/24/2017 02:33:19 am

Hi John,

Great post, I've toyed with this idea for a while but never pulled the trigger as I haven't had a strong enough need.

I have done charting in the browser with D3 and amcharts and had similar findings about live data, it isn't a common use case in the browser so there is likely to be limitations trying to run at speed.

One concern I had with bringing it into LabVIEW is what browser is used for the ActiveX control, is it IE11 by default now?

Reply
Jon McBee
3/3/2017 11:01:43 am

Hey James,

Sorry I didnt get back to you sooner, the notification that you posted got lost in my inbox. Your concern is a good one, and it should have been placed in my caveats section of the blog post. I believe you are correct about the default being IE11.

Have you ever looked into https://www.teamdev.com/dotnetbrowser as a .NET Windows Form control on the Front Panel? It's been on my list to look into it as a way of embedding a modern browser on a Front Panel I just haven't gotten around to seeing if it would work.

Reply
Omar Mussa
3/8/2017 11:48:52 am

FWIW - Used some of these materials when presenting yesterday and found one issue that could be easily changed. Currently, the xctl uses a relative path to the html file that is hard coded but prevents the xctl from allowing multiple instances. With a minor tweak, the html generated could use an instance ID so that the html file would be per xctl instance which would allow multiple graphs of same type (for example could use subpanels on a VI to create a dashboard).

Reply
Jon McBee
3/8/2017 01:54:13 pm

Hey Omar,

I noticed that too but didn't fix it in the code I posted here, I ended up writing a different control for use on my project and neglected to update this demo code. Regarding the dashboard what are your thoughts on XControls in SubPanels vs. creating one XControl that handles the dashboard on the javascript+html+css side?

-Jon

Reply
Aart-Jan
12/8/2017 05:32:27 am

Sweet post, Compliments Jon!
I am looking into ways for my software users to template their own reports.

As far as javascript libraries go: I tried several other libraries, like plotly, but they all yield script errors when I load them in the activeX control

Reply
David C. Li
12/31/2018 06:56:47 pm

Hey Jon, thanks for the post! Was informative.

By the way there's a typo in Update Html File.vi under each of the xcontrols.

In the string build section, in the first string. The backgroundColor should be #ffffff (6x Fs). In the files that I downloaded they were #fffff (5x Fs).

The 5x Fs results in an image export of the chart with a black background.

Changing it to 6x Fs will get you back the white background.

Regards,
David C. Li

Reply



Leave a Reply.

    RSS Feed

    Tags

    All
    Abstract Messaging
    Actor Framework
    Agile
    AI
    Asynchronous Programming
    Best Practices
    C#
    Complexity
    Continuations
    Control Values By Index
    Craftsmanship
    Dependency Inversion
    Dependency Viewer
    Futures/Promises
    Genetic Algorithm
    Liskov Substitution
    Malleable VIs
    Mediator Pattern
    .NET
    Object Oriented
    Object-Oriented
    Packed Project Library
    Parallelism
    Polymorphism
    Pub/Sub
    RawCap
    Root Loop
    Scrum
    Task Parallel Library
    TCP/IP
    TDD
    Test Engineering
    UML
    Unit Test
    VI Scripting
    VI Server
    WireShark

    Archives

    October 2019
    April 2019
    July 2018
    October 2017
    March 2017
    February 2017
    January 2017
    December 2016
    July 2016
    June 2016
    May 2016
    April 2016
    March 2016
    February 2016
    January 2016
    December 2015
    November 2015
    October 2015
    August 2015
    February 2015
    January 2015

    LabVIEW Blogs

    Eyes on VIs
    LabVIEW Hacker
    VI Shots
    LabVIEW Artisan
    Software Engineering for LabVIEW
    ​Wiresmith Techology
Picture
Powered by the Panda Ant

  • Blog
  • About
  • Contact
  • Tools
  • Resources