I am using pubnub to send the touch and move events from a mobile screen. I'm able to subscribe to it with JavaScript and pubnub library and display the data on the page with the below code. The data looks like array data, which is how I'm sending it but I can not access the array elements. If I JSON.stringify the data it comes with the [] but if I don't I just get the three values seperated by commas.
I want to graph the x position against time. I pass data from pubnub to the cloud and the javascript reads it and prints it. The data is [phone#, time in 10 millisecond increments, x-position on screen]. It prints what appears to be an array, one line at a time (see output below). Here is the code:
<html>
Output from App (phone#, 100's of milliseconds, x-position on screen:
<div id=box></div>
<script src=http://cdn.pubnub.com/pubnub.min.js></script>
<script type="text/javascript" src="../smoothie.js"></script>
<script> (function(){
var pn = PUBNUB.init({ subscribe_key : 'sub-c-51b36680-27cf-11e4-97e6-02ee2ddab7fe', publish_key : 'pub-c-165f3bbe-22a9-47f7-b3f1-33b86035939f' });
var box = pn.$('box'), input = pn.$('input'), channel = 'z';
pn.subscribe({
channel : channel,
callback : function(text) {
var tst = JSON.stringify(text);
box.innerHTML = tst + '<br>' + box.innerHTML; }
});
pn.bind( 'keyup', input, function(e) {
(e.keyCode || e.charCode) === 13 &&
pn.publish({
channel : channel,
message : { "msgtext": input.value },
x : (input.value='')
})
})
})()</script>
</html>
It looks like this onscreen when I move my finger on the mobile device with the app:
Output from App (phone#, 100's of milliseconds, x-position on screen:
[5551212,2276.639892,249]
[5551212,2276.537952,249]
[5551212,2276.442852,251]
[5551212,2275.867848,275]
[5551212,2275.832444,277]
[5551212,2275.210072,299]
[5551212,2274.950404,318]
[5551212,2274.793408,325]
[5551212,2271.274288,268]
[5551212,2274.621032,335]
[5551212,2274.609068,338]
[5551212,2271.561424,305]
[5551212,2275.341676,285]
[5551212,2274.077036,353]
[5551212,2271.694492,327]
[5551212,2274.4738,347]
[5551212,2274.48674,342]
[5551212,2274.206684,352]
Looks like array values. Well, I don't seem to be able to access the elements of the array with normal array syntax like tst[i]. I've tried creating as seperate array name, setting the values and doing a loop with document right like document.write("the x position is", tst[i]") but that doesn't work.
Ultimately, what I'm trying to do is get this program called smoothie charts for javascript to take the time and x-position values and graph them as the data comes in. I thought I could use an array or a time series. I'm looking for help to get smoothie to plot this incoming data.
Here is the sample smoothie chart example:
<!DOCTYPE html>
<html>
<head>
<title>Smoothie Chart Example</title>
<script type="text/javascript" src="smoothie.js"></script>
</head>
<body>
<h1>Smoothie Example</h1>
<canvas id="mycanvas" width="900" height="300"></canvas>
<script type="text/javascript">
// Random data
var line1 = new TimeSeries();
var line2 = new TimeSeries();
setInterval(function() {
line1.append(new Date().getTime(), Math.random());
line2.append(new Date().getTime(), Math.random());
}, 1000);
var smoothie = new SmoothieChart({ grid: { strokeStyle: 'rgb(125, 0, 0)', fillStyle: 'rgb(60, 0, 0)', lineWidth: 1, millisPerLine: 250, verticalSections: 6 } });
smoothie.addTimeSeries(line1, { strokeStyle: 'rgb(0, 255, 0)', fillStyle: 'rgba(0, 255, 0, 0.4)', lineWidth: 3 });
smoothie.addTimeSeries(line2, { strokeStyle: 'rgb(255, 0, 255)', fillStyle: 'rgba(255, 0, 255, 0.3)', lineWidth: 3 });
smoothie.streamTo(document.getElementById("mycanvas"), 1000);
</script>
<p><a href="tutorial.html">Return to tutorial</a></p>
</body>
</html>
The smoothie library is really small. There is an overview here: http://smoothiecharts.org/ and the libary can be downloaded here:
I'm not sure that tst in the original script is actually an array and if it is I'm not sure how to read it into smoothie much less just print each array element using document.write.
– Guy Forrester Dec 16 '14 at 18:08