文章/答案/技术大牛

发布

社区首页 >问答首页 >使用pubnub流中的平滑图创建线条图

问使用pubnub流中的平滑图创建线条图
EN

Stack Overflow用户

提问于 2014-12-16 18:06:56

回答 1查看 1.5K关注 0票数 1

我正在使用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的输出(phone#，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占用时间和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/和libary可以在这里下载：

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

javascript

arrays

streaming

pubnub

smoothie.js

回答 1

Stack Overflow用户

发布于 2014-12-18 06:05:20

使用Smoothy Stream外接程序从Smoothie.js数据流创建具有PubNub图形的线条图

跳到GitHub上的源代码：

从PubNub获得GitHub添加的Smoothy流现在！

使用PubNub数据流网络将数据流到屏幕上，并在smoothy.js画布中绘制。平滑图:用于流数据的JavaScript图表库可以使用Smoothy库插件实时接收实时更新。

最初，对这个库的需求是在StackOverflow用于从PubNub流创建包含平滑图的线图上请求的。

您还应该查看活动的PubNub Smoothy流附加的现场演示以查看此操作。但是，不要跳过下面的用法示例。

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

使用PubNub数据通道启动平滑流。您可以从互联网上任何地方的远程源实时接收鼠标坐标、股票价格或服务器cpu使用情况。下面的示例将从流媒体JavaScript市场订单 DSN (Data )上的实时数据流提要中接收股票价格。

<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坐标，将手指放在移动设备的屏幕上，并上下拖动。

基于堆栈溢出问题的Corona传输实例

您需要引用元素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
});

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/27511102

复制

相似问题

问使用pubnub流中的平滑图创建线条图
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用pubnub流中的平滑图创建线条图EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用pubnub流中的平滑图创建线条图
EN