Websocket for labview: LabVIEW Websocket project part 2

We have successfully completed phase 1 of our sample project. now we will try to view in browser that is we will develop a subscriber for browser.

To check this we need to develop a HTML page. tools required for

We will convert the Subcriber vi front panel to HTML5

After very long research I chose HighCharts Javascript based charting. In my comparison I have included Amcharts, Zing charts, Google charts, High charts and some other charts. in this I chose High Charts for few reasons.

I am using HighCharts 3.0.7. Now I have to try one basic program how to use it.

1. Download the latest version from www.highcharts.com

2. Check the example program. I have located one example code, which displays dynamic graph

3. copy the code and paste it in notepad and save as html file. open it in browser

4. you should see this output

<html>  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
 <title>Highcharts Example</title>  
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>  
 <script type="text/javascript">  
 $(function() {  
      Highcharts.setOptions({  
           global : {  
                useUTC : false  
           }  
      });  
      // Create the chart  
      $('#container').highcharts('StockChart', {  
           chart : {  
                events : {  
                     load : function() {  
                          // set up the updating of the chart each second  
                          var series = this.series[0];  
                          setInterval(function() {  
                               var x = (new Date()).getTime(), // current time  
                               y = Math.round(Math.random() * 100);  
                               series.addPoint([x, y], true, true);  
                          }, 1000);  
                     }  
                }  
           },  
           rangeSelector: {  
                buttons: [{  
                     count: 1,  
                     type: 'minute',  
                     text: '1M'  
                }, {  
                     count: 5,  
                     type: 'minute',  
                     text: '5M'  
                }, {  
                     type: 'all',  
                     text: 'All'  
                }],  
                inputEnabled: false,  
                selected: 0  
           },  
           title : {  
                text : 'Live random data'  
           },  
           exporting: {  
                enabled: false  
           },  
           series : [{  
                name : 'Random data',  
                data : (function() {  
                     // generate an array of random data  
                     var data = [], time = (new Date()).getTime(), i;  
                     for( i = -999; i <= 0; i++) {  
                          data.push([  
                               time + i * 1000,  
                               Math.round(Math.random() * 100)  
                          ]);  
                     }  
                     return data;  
                })()  
           }]  
      });  
 });  
 </script>  
 </head>  
 <body>  
 <script src="http://code.highcharts.com/stock/highstock.js"></script>  
 <script src="http://code.highcharts.com/stock/modules/exporting.js"></script>  
 <div id="container" style="height: 500px; min-width: 500px"></div>  
 </body>  
 </html>

I am going to use this code in our project for publishing the random data over internet browser. First, I have to study this code only then I will know which part of the I have to use, edit etc.

I just thought of referring some books and found following books. Because books are good way to understand the technology. Let us see whether following books are helping us to complete the project successfully.

Converting Random Data to Json File

I thought to convert random data generated in publisher.vi to Json file. But there is no point in doing this. If I convert it then I have to send file over the websocket which will be time consuming process. file creation takes some time disk writing at publisher end also in subscriber end, which is complicated solution when we can transmit the data directly.

however, I found some interesting toolkit for json file creation in LabVIEW, which I have explained here. It may be useful some other time.

Websocket for labview

Tuesday, 5 November 2013

LabVIEW Websocket project part 2

Converting Random Data to Json File

No comments:

Post a Comment