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.

here is what I see in the browser

the result of python script:

Hi Hina, Thank you for asking about Eon. May you paste a sample result of your data (a JSON message) from your `Python Publish`? Also I'm noticing your JavaScript has a `Subscribe` and a `Publish` call and that should be omitted. — Stephen Blum, Jul 22 '15 at 01:13
@PubNub i have added the result to the above question please have look. even if I omit the publish function the chart wont render :( — Imo, Jul 22 '15 at 12:17
Two possible issues: 1. Different pub/sub keys, just to make sure you are using identical keys to instantiate pubnub on python and javascript. 2. Could you print `data_clean` for us? `89453.0` is not a JSON object, EON requires a standard payload. My bet is there error lies there. — GleasonK, Jul 22 '15 at 22:32
`89453.0` is validated as a literal that we support at PubNub as valid JSON. However your answer is presented below as you need to ensure to use our `transform` method into EON format. — Stephen Blum, Jul 23 '15 at 20:41

Stephen Blum · Accepted Answer · 2015-07-23T01:01:50.920

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>

PubNub EON chart not Rendering Data

1 Answers1

PubNub EON Custom Streaming Chart Data Formats

PubNub EON Transform Method for Streaming Chart Data

EON Streaming Chart Data Format

Example Streaming Chart Data Setup