Using JavaScript and amCharts to Plot Trends with LabVIEW

[James_McN]

Overview

I have produced a few documents now on using web services with JavaScript and some external APIs for producing web pages hosted by the NI Web Server. In Using JavaScript and Google Charts with LabVIEW Web Services explain the fundamentals and show the google charts API.

This example shows 2 new concepts:

1. Decimating data server side for display.
2. Using amCharts as an alternative to google charts.

Description

Decimating Data for Display

When loading trend data you may want to show a long term trend such as temperature over the period of a day.  The reality is that you cannot display all of this data on a screen, you only have c. 1000 pixels across. Also transmitting all this data takes time. To reduce the time to download the data we can decimate the data in the web service VI.

In the attached project I have a subVI I have created called Decimate Data.vi.  When we call the load data web service we send it a requested dt. In this case my data is once per second which means dt = decimation factor. Then I pass the data through my decimation VI.  What we don't want to do is just pull every 10th point as we may miss significant peaks in the data. Instead I have a basic algorithm which pulls the section to be decimated and calculates the mean, max and min. Then it will return the max or the min, whichever is furthest from the mean. This means that we should still see our spikes, even in our decimated data.  There are likely more sophisticated algorithms available, but on my basic data set this worked OK.

amCharts API

Previously I showed an example using the google charts API.  This produces a wide variety of very nice graphics but there were a couple of things I wasn't keen on:

1. Building the data object seemed a little overcomplicated (although this is a minor inconvenience).
2. The big one: You had to link back to the version on googles servers, which means the client always needs an internet connection. Realistically there are cases with real time targets where you may want to connect in an environment where this is not possible.

After searching for a while I came across amCharts. These do not have the variety that google charts have but it has the basic formats, a similar level API to google charts and can be downloaded and used locally for free (bar a small link to the web site on the chart).

Pros:

• Available offline.
• Slightly simpler data model.
• Still a high level API (vs some other alternatives).

Cons:

• Not the same variety
• Not quite as much documentation.

The way the data model for this works is that you have an array of objects in JavaScript (which could be an array of clusters from LabVIEW). You then create the chart object and identify one element of the object to act as the X axis value (Category). You then create graphs, each of which picks another element to act as a Y plot (Value).

I worked from one of their example applications and played with the configuration options to create the script in this project called loadtrend.js. I have tried to keep it well documented so hopefully that will be the best description of what I am doing.

Requirements

• LabVIEW Full Development System 2012 (or compatible)

Steps to Implement or Execute Code

1. Unzip the attached folder to your computer
2. Open the project "amCharts on Windows 2012 NIVerified.lvproj"
3. Build and deploy the web service
4. Navigate to localhost:8080/amcharts/Static/trend.html in your browser

Additional Information or References
VI Block Diagram

 

 **This document has been updated to meet the current required format for the NI Code Exchange.**

[JohnCaipa]

Excellent project and excellent work. A little more interactive than the google charts.

[Raul.Ionel]

Very nice project. It works fine and is a great learning example.

[jiangliang]

Great Job Sir!!!

I always want to do something with cRIO like that.

Do you have any idea about input controllers?

If we can imply both Input and Output based on Webserver, maybe it's a good time to say goodbye to LabVIEW Runtime in many cases (I really don't like the idea of install a 800k main program with a 200M Runtime)

[hhtnwpu]

excellent work！

[James_McN]

Web services certainly can take input. Normally this is done through the URL so in JavaScript we must build the URL dynamically with the desired input. In fact I do this with the decimation factor in this example. There are more complex methods you can use with POST if the URL is insufficient but it covers most cases.

[karthika92]

I have tried to deploy this project in cRIO using Labview 2012. I can able to display the data. but in html page the graph is not displaying. All other images are displaying. Can anyone suggest me the solution??

[James_McN]

If the rest of the page is displaying that suggests that the LabVIEW side is set up OK but for some reason the charts API isn't loading.

I would suggest maybe trying to download Firefox and the Firebug plugin. This lets you debug the javascript and maybe highlight exactly what the cause of the problem is.

[karthika92]

Do i need to change the javascript?

[India_]

Hey,

I tried running this on LabVIEW 2013. It seems like "amcharts.js" script is not getting loaded. Can you let me know what I might be doing wrong ? I added all the static files into a public content folder. What I am observing is that the chart is not getting loaded from the beginning itself.

[India_]

Hey,

I made some changes and it worked in LabVIEW 2013 on a Real-Time target. I am not sure what specifically I changed but the noticeable changes were -

1. I organized all static files in one common folder. Previously, loadtrend.js was within a folder and amcharts was a separate folder inside that with the rest of the static files. Moreover, images had its own folder. LabVIEW 2013 Web Services was making its own "Public Content" folders at these levels and hence the URLs for each component was varying.

2. I added a "LabVIEW web request" data object to the Load Data vi, which I had added as a Web Resource.

3. I changed the default URL of the above mentioned method to match that mentioned in the javascript to <ip address>/amcharts/Trend/:dt

Anyways, thanks for the good example ! Maybe you can compile and publish a LabVIEW 2013 verison as well. Here is another example I referred to (LV 2013) -> https://decibel.ni.com/content/docs/DOC-26879