从pubnub流创建带有smoothie图的折线图

时间：2014-12-16 18:06:56

标签： javascript arrays streaming pubnub smoothie.js

我正在使用pubnub发送触摸并从移动屏幕移动事件。我可以使用JavaScript和pubnub库订阅它，并使用以下代码在页面上显示数据。数据看起来像数组数据，这是我发送它的方式，但我无法访问数组元素。如果我JSON.stringify提供[]数据，但如果我不知道我只是用逗号分隔这三个值。

我想根据时间绘制x位置。我将数据从pubnub传递到云端，javascript读取并打印出来。数据是[phone＃，时间以10毫秒为增量，x位置在屏幕上]。它打印出一个似乎是一个数组，一次一行（参见下面的输出）。这是代码：

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

当我使用应用程序在移动设备上移动手指时，它看起来就像这样：

App的输出（手机号码，100毫秒，屏幕上的x位置：

[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]

看起来像数组值。好吧，我似乎无法使用正常的数组语法（如tst[i]）访问数组的元素。我尝试创建单独的数组名称，设置值并使用document.write("the x position is", tst[i]")之类的文档进行循环，但这不起作用。

最终，我尝试做的是让这个程序称为javascript的smoothie图表，以获取时间和x位置值，并在数据进入时绘制它们。我想我可以使用数组或者时间序列。我正在寻求帮助，让思慕雪能够绘制这些传入的数据。

以下是冰沙图示例示例：

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

冰沙库非常小。这里有一个概述：http://smoothiecharts.org/ 图书馆可以在这里下载：

我不确定原始脚本中的tst实际上是一个数组，如果是，我不确定如何将其读入smoothie，更不用说使用document.write打印每个数组元素了。 / p>

1 个答案:

答案 0 :(得分：0)

使用Smoothy Stream Add-on从PubNub数据流创建包含Smoothie.js图表的折线图

跳到GitHub上的源代码：

  现在

Get the PubNub Smoothy Stream Add-on from GitHub！

使用PubNub数据流网络将数据流式传输到您的屏幕 并在smoothy.js画布上绘制。 Smoothie Charts: A JavaScript Charting Library for Streaming Data 可以使用Smoothy Stream库附加组件实时接收实时更新。

Stream Live Data to Smoothy.js Chart

  

最初，StackOverflow for Creating a line chart with smoothie graphs from a PubNub Stream要求使用此库。

您还应该查看实时PubNub Smoothy Stream Add-on Live Demo以查看此操作。 但请不要跳过下面的使用示例。

用法示例 - Smoothy.js数据流演示

使用PubNub数据通道启动平滑流。 您可以接收鼠标坐标或股票价格或服务器CPU使用情况 实时从互联网上任何地方的远程来源。 以下示例将从实时中获取股票价格 数据流馈送 Streaming JavaScript Market Orders 在PubNub DSN（数据流网络）上。

<canvas id="chart1" width="400" height="100"></canvas>

<script src="https://cdn.pubnub.com/pubnub.min.js"></script>
<script src="js/smoothy.min.js"></script>
<script src="js/smoothstream.js"></script>
<script>(function(){

    // =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
    // Start Smooth Stream
    // =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
    var stream = smoothstream({
        channel       : "pubnub-market-orders",
        subscribe_key : "sub-c-4377ab04-f100-11e3-bffd-02ee2ddab7fe",

        chart         : 'chart1',
        key           : function (message) { return message.bid_price },
        strokeStyle   : 'rgba(185,230,199,1)',
        fillStyle     : 'rgba(222,238,191,0.7)',
        lineWidth     : 5
    });

})();</script>

停止平滑流

您还可以使用.stop();方法停止信息流。

stream.stop();

从移动设备的触摸事件中流式传输X坐标

如果您真的想要这样做，您也可以将触摸和鼠标移动事件的坐标流式传输到平滑图表。你确实想这样做因为真棒。首先传输坐标并将流接收器源代码更改为如下所示：

// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
// Receive Touch Event Coordinates
// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
var stream = smoothstream({
    channel       : "pubnub-market-orders",
    subscribe_key : "sub-c-4377ab04-f100-11e3-bffd-02ee2ddab7fe",
    chart         : 'chart1',

    key           : function (coord) { return coord.x }, // <-- *HERE*

    strokeStyle   : 'rgba(185,230,199,1)',
    fillStyle     : 'rgba(222,238,191,0.7)',
    lineWidth     : 5
});

您需要更改key参数以匹配传输的触摸/鼠标屏幕坐标的格式。你可能正在传输一个看起来像这样的数组：

function (coords) { return coords[0] }, // <-- *HERE*

这将实时绘制平滑图表上的X坐标，将手指放在移动设备的屏幕上并上下拖动。

基于Stackoverflow问题的Corona SDK传输示例

您想要引用元素var x = message[1];和var y = message[2];。

// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
// Corona SDK Transmission Example based on Stackoverflow Question
// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
var stream = smoothstream({
    channel       : "CORONA_SDK_CHANNEL",
    subscribe_key : "sub-c-4377ab04-f100-11e3-bffd-02ee2ddab7fe",

    x             : function (coord) { return coord[1] }, // <-- (x) HERE
    y             : function (coord) { return coord[2] }, // <-- (y) HERE

    chart         : 'chart1',
    strokeStyle   : 'rgba(185,230,199,1)',
    fillStyle     : 'rgba(222,238,191,0.7)',
    lineWidth     : 5
});
相关问题
最新问题