PubNub EON 图表未呈现数据

Question

我正在尝试使用 PUBNUB EON charting library 渲染样条图表。我不明白这里出了什么问题。我可以在控制台中看到数据，但图表未呈现，只有 x 和 y 轴线。我从 python SDK 获取数据并通过 javascript SDK 订阅。控制台没有错误信息。

我的 python 密码是

def counterVolume(data):
  for each in data:
    y = each.counter_volume
    data_clean = json.dumps(y, indent=4, separators=(',', ': '))
    print pubnub.publish(channel='channel', message= data_clean)


counterVolume(data)

我的订阅javascript功能是

       var data;
       var pubnub = PUBNUB.init({
                                publish_key: 'pub',
                                subscribe_key: 'subf'
                                            });

       var channel = "c3-spline";
                    eon.chart({
                             history: true,
                            channel: 'channel',
                             flow: true,
                               generate: {
                                bindto: '#chart',
                                data: {
                                x: 'x',
                                labels: false
                                        },
                               axis : {
                                  x : {
                                  type : 'timeseries',
                                  tick: {
                                 format: '%m-%d %H:%M:%S'
                                        }
    }
    } }});
    function dataCallback(){
                        pubnub.subscribe({
                                  channel: 'channel',
                                  message: function(m){
                                           data = m
                                           console.log(data)
          }
        });
        };
 dataCallback();
 pubnub.publish({
                     channel: 'orbit_channel',
                     message: {
                            columns: [
                                     ['x', new Date().getTime()],
                                     ['y', data]
              ]
            }
          })

我可以在控制台中看到这些值，但我不明白为什么它不会呈现在图表上。

python脚本的结果：

Answer 1

PubNub EON 自定义流图表数据格式

PubNub EON 需要特定格式才能在图表上呈现和显示您的数据。您可以使用需要 function(){} 的内置 transform 参数呈现任何数据格式。提供的转换函数类似于 map 操作的回调，并转换您的数据以匹配所需的 EON 格式。

流式图表数据的 PubNub EON 转换方法

使用 PubNub Public Streams 中的示例流。您可以使用 transform 方法为 EON 格式化您的消息。

EON 流图表数据格式

{ columns : [
    ['x', new Date().getTime()],
    ['Humidity', m.humidity],
    ['Temperature', m.ambient_temperature],
    ['Light', m.photosensor]
] }

示例流图数据设置

这是为 EON 流式图表格式化的工作 PubNub 流的示例。使用 transform 方法，您的 JavaScript 应该如下所示：

<script>
var pubnub = PUBNUB({
    subscribe_key : 'YOUR_SUBSCRIBE_KEY_HERE' // <-- CHANGE!!!
});

eon.chart({
    pubnub   : pubnub,
    history  : false,
    channel  : 'channel', // <-- YOUR CHANNEL
    flow     : true,
    generate : {
        bindto : '#chart',
        data   : {
            x      : 'x',
            labels : true
        },
        axis : {
            x : {
                type : 'timeseries',
                tick : {
                    format : '%Y-%m-%d'
                }
            }
        }
    },
    transform : function(data) {
        return { columns : [
            ['x', new Date().getTime()],
            ['Value', data]
        ] };
    }
});
</script>

PubNub EON 图表未呈现数据

PubNub EON chart not Rendering Data

javascript

python

charts

pubnub

PubNub EON 自定义流图表数据格式

流式图表数据的 PubNub EON 转换方法

EON 流图表数据格式

示例流图数据设置