The community forums are in BETA and closed to the public.

Creating a line chart with smoothie graphs from a pubnub stream

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 separated 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:

Output from App (phone#, 100's of milliseconds, x-position on screen:
    <div id=box></div>
     <script src=></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';
  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 &&
  channel : channel,
  message : { "msgtext": input.value },
  x : (input.value='')

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 separate 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>
    <title>Smoothie Chart Example</title>
    <script type="text/javascript" src="smoothie.js"></script>

    <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);

    <p><a href="tutorial.html">Return to tutorial</a></p>


The smoothie library is really small. There is an overview here: and the library 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, I am getting null for input variable:

var box = pn.$('box'), input = pn.$('input'), channel = 'z';

Is something missing here?

Here is the modified code: Output from App (phone#, 100's of milliseconds, x-position on screen:)

about the the pn.bind code I was referring to which contains the publish code?

Hi Craig. The app only needs to subscribe and print a graph. Unfortunately I can not post the corrected code in a readable format. If you cut and paste my last comment into a good editor it should format out correctly. I took all the publish part out of the code. I get no errors when I run it. I can send you the apk file for Android to test the app if you want. I really appreciate your input very much. - Thanks, Guy

But I thought the issue was with the data being received? How can I troubleshoot without the data being published?

I have an apk for Android that sends the data. What I am trying to do is pass the data to the smoothie library. I can also provide the Corona SDK source if there is a way to send it.

I am sending data now:

Comments to this discussion are now closed!