PubNub EON chart not Rendering Data

Question

I am trying to render a spline chart with PUBNUB EON charting library. I do not understand what is going wrong here. I can see the data in console, but the chart is not rendering, there are only x and y axis lines. I am getting the data from python SDK and subscribing via javascript SDK. There is no error message in the console.

My python code is

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)

My subscribe javascript function is

       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]
              ]
            }
          })

I can see the values in console but I do not understand why it wont render on chart.

the result of python script:

89453.0
89453.0
89453.0
89453.0

Answer 1

PubNub EON Custom Streaming Chart Data Formats

PubNub EON requires a specific format in order to render and display your data on charts. You can render any data format by using the built-in transform parameter which expects a function(){}. The transform function provided is treaded like a callback to a map operation and transforms your data to match the required EON format.

PubNub EON Transform Method for Streaming Chart Data

Using the example stream from PubNub Public Streams. You can use the transform method to format your message for EON.

EON Streaming Chart Data Format

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

Example Streaming Chart Data Setup

Here is an example of a working PubNub stream being formatted for EON streaming chart. Using the transform method, your JavaScript should look like this:

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