EON PubNub Chart Does Not Display Data

Question

I am trying to display a spline chart with a PUBNUB EON charting library . I don’t understand what is going on here. I see the data in the console, but the chart is not rendering, there are only x and y axis axes. I get data from python SDK and subscribe via javascript SDK. There is no error message in the console.

My python code

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 javascript function for subscribing

  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 see the values ​​in the console, but I don’t understand why this will not be displayed on the chart.

python script result:

 89453.0 89453.0 89453.0 89453.0 

Answer 1

PubNub EON Custom Flowcharts Data Formats

PubNub EON requires a specific format for visualizing and displaying your data on graphs. You can display any data format using the built-in transform parameter that function(){} expects. The provided conversion function acts as a callback to the map operation and converts your data to the required EON format.

PubNub EON Conversion Method for Flowchart Data

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

EON Flowchart Data Format

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

Flowchart data setup example

The following is an example of a PubNub workflow formatted for an EON streaming diagram. 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>