Data Visualization with XControls & JavaScript

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.

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.

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.

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

---