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脚本的结果：

89453.0
89453.0
89453.0
89453.0

Answer 1

PubNub EON 自定义流图数据格式

PubNub EON 需要特定格式才能在图表上呈现和显示您的数据。您可以使用内置的transform 参数呈现任何数据格式，该参数需要function(){}。提供的转换函数就像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>