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.
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
<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.
