Search code examples
pubnubc3

Pubnub EON chart rendering multiple data in the chart


I am following the follwoing example to publish my data using pubnub and eon charts. When I publish just one data stream i.e 'checkpointsize' the chart renders fine but the minute I enter data2 i.e 'checkpointlength' it gives me error

Uncaught Error: Source data is missing a component at (1,1)!

I can see the data in pubnub console, means that I am getting a data stream but the it cannot be rendered into the chart.

var pubnub = PUBNUB({
    subscribe_key : 'YOUR_SUBSCRIBE_KEY_HERE'
});

eon.chart({
    pubnub   : pubnub,
    history  : false,
    channel  : 'orbit_channel',
    flow     : true,
    generate : {
        bindto : '#chart',
        data   : {
            x      : 'x',
            labels : true
        },
        axis : {
            x : {
                type : 'timeseries',
                tick : {
                    format : '%H:%M:%S'
                },
                zoom: {
                   enabled: true
                }
            }
        }
    },
    transform : function(m) {
        return { columns : [
            ['x', new Date().getTime()],
            ['Checkpoint Size', m.checkpointsize],
            ['Checkpoint length', m.checkpointlength]
        ] };
    }
});

here is the pubnub console

enter image description here


Solution

  • Combine Two Data Streams into One Chart with PubNub Eon

    Looks like you are trying to plot two vectors on the same graph. This is possible for you to do by transmitting the values together at the same time in the same published message object. I think you are publishing twice in your example. Your publish message needs to contain both data points. Here is an example

    pubnub.publish({
        "checkpointsize"   : 75.0,
        "checkpointlength" : 5000.0
    })