CODEWITHSUNDEEP
javascriptjsonc3.js
Abhas Tandon
Abhas Tandon

Reputation: 1889

C3.js flow api with JSON data source not working

I am trying to use flow api(http://c3js.org/samples/api_flow.html) from C3 with json data. I am passing my json with keys as mentioned in http://c3js.org/reference.html#api-flow however my chart doesn't refresh with new data.

Below is my code and jsfiddle: http://jsfiddle.net/k9Dbf/496/

var chart = c3.generate({
    data: {
        json: [{
        "proxy": "10.0.1.15:1213",
            "url": "http://www.google.com/in/aaaa",
            "host": "http://www.google.com/",
            "time": "Thu Sep 03 2015 02:34:04 GMT-0700 (PDT)",
            "useragent": "Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.95 Safari/537.36",
            "responsetime": 121,
            "pageSize": 500

    }],
        type: 'line',
        keys: {
            x: 'url',
            value: ['proxy', 'url', 'host', 'time', 'responsetime', "pageSize", "useragent"]
        }
    },
    axis: {
        x: {
            type: 'category'
        }
    }
});
setTimeout(function () {
    chart.flow({
        data: {
            json: getDataFromAPI(),
            keys: {
                x: 'url',
                value: ['proxy', 'url', 'host', 'time', 'responsetime', "pageSize", "useragent"]
            }
        },
        duration: 1500
    })
}, 2000);

var getDataFromAPI = function () {
    var data = [{
        "proxy": "10.0.1.15:1211",
            "url": "http://www.google.com/in/test",
            "host": "http://www.google.com/",
            "time": "Thu Sep 03 2015 02:34:04 GMT-0700 (PDT)",
            "useragent": "Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.95 Safari/537.36",
            "responsetime": 200,
            "pageSize": 332
    }, {
        "proxy": "10.0.1.15:1212",
            "url": "http://www.google.com/in/try",
            "host": "http://www.google.com/",
            "time": "Thu Sep 03 2015 02:34:04 GMT-0700 (PDT)",
            "useragent": "Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.95 Safari/537.36",
            "responsetime": 100,
            "pageSize": 200
    }, {
        "proxy": "10.0.1.15:1213",
            "url": "http://www.google.com/in/demo",
            "host": "http://www.google.com/",
            "time": "Thu Sep 03 2015 02:34:04 GMT-0700 (PDT)",
            "useragent": "Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.95 Safari/537.36",
            "responsetime": 333,
            "pageSize": 500

    }];
    return data;
};

Upvotes: 0

Views: 1479

Answers (1)

Abhas Tandon
Abhas Tandon

Reputation: 1889

I was a stupid mistake from my side in understanding the API. We need not wrap the JSON inside data key. Here is the working code:

var chart = c3.generate({
    data: {
        json: [{
        "proxy": "10.0.1.15:1213",
            "url": "http://www.google.com/in/aaaa",
            "host": "http://www.google.com/",
            "time": "Thu Sep 03 2015 02:34:04 GMT-0700 (PDT)",
            "useragent": "Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.95 Safari/537.36",
            "responsetime": 121,
            "pageSize": 500

    }],
        type: 'line',
        keys: {
            x: 'url',
            value: ['proxy', 'url', 'host', 'time', 'responsetime', "pageSize", "useragent"]
        }
    },
    axis: {
        x: {
            type: 'category'
        }
    }
});
setTimeout(function () {
    chart.flow({
            json: getDataFromAPI(),
            keys: {
                x: 'url',
                value: ['proxy', 'url', 'host', 'time', 'responsetime', "pageSize", "useragent"]
            },
        duration: 1500
    })
}, 2000);

var getDataFromAPI = function () {
    var data = [{
        "proxy": "10.0.1.15:1211",
            "url": "http://www.google.com/in/test",
            "host": "http://www.google.com/",
            "time": "Thu Sep 03 2015 02:34:04 GMT-0700 (PDT)",
            "useragent": "Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.95 Safari/537.36",
            "responsetime": 200,
            "pageSize": 332
    }, {
        "proxy": "10.0.1.15:1212",
            "url": "http://www.google.com/in/try",
            "host": "http://www.google.com/",
            "time": "Thu Sep 03 2015 02:34:04 GMT-0700 (PDT)",
            "useragent": "Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.95 Safari/537.36",
            "responsetime": 100,
            "pageSize": 200
    }, {
        "proxy": "10.0.1.15:1213",
            "url": "http://www.google.com/in/demo",
            "host": "http://www.google.com/",
            "time": "Thu Sep 03 2015 02:34:04 GMT-0700 (PDT)",
            "useragent": "Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.95 Safari/537.36",
            "responsetime": 333,
            "pageSize": 500

    }];
    return data;
};

http://jsfiddle.net/k9Dbf/497/

Upvotes: 1

Related Questions