C3: Динамическое построение графиков с использованием внешнего файла JSON

Созданный на 15 окт. 2016 · 3Комментарии · Источник: c3js/c3

Я хотел бы поблагодарить вас за создание этой замечательной библиотеки с открытым исходным кодом.
Я хочу создавать динамические диаграммы с использованием внешнего файла JSON, в котором диаграмма анализирует данные json каждый раз.
Мой текущий код:
var chart = c3.generate({ bindto: '#chart', size: { height: 240, width: 480 }, data: { url: 'static/data/trainp.json', mimeType: 'json', keys: { x: 'Series', value: ['Setting1'] }, type: 'line' }, subchart: { show: true } });

Пример необходимого графика: https://jsfiddle.net/cy2owjva/

Пожалуйста, дайте мне знать, какие изменения мне нужно внести в https://jsfiddle.net/cy2owjva/ .
Спасибо

Источник

Saikat-Sinha

Самый полезный комментарий

@AskSaikatSinha Попробуйте это
`
$ (function () {

$.getJSON('./linejson.json', function (externaldata) {
var chart = c3.generate({
    title: {
        text:'External JSON loading via C3.js'
    },
    bindto: '#chart',
    data: {
       json: externaldata,
        type: 'area-spline',

    }
})

setInterval(function(){
    chart.flow({
        columns:
                [
                    ['data1',Math.round(Math.random()*200)]
                ],
        type:'area-spline'
    })
}, 1500)

});
})
`

и ваш внешний файл JSON должен быть таким

файл linejson.json

{ "data1": [30, 20, 50, 40, 60, 50] }

HawiCaesar 1 нояб. 2016

👍2

Все 3 Комментарий

@AskSaikatSinha Попробуйте это
`
$ (function () {

$.getJSON('./linejson.json', function (externaldata) {
var chart = c3.generate({
    title: {
        text:'External JSON loading via C3.js'
    },
    bindto: '#chart',
    data: {
       json: externaldata,
        type: 'area-spline',

    }
})

setInterval(function(){
    chart.flow({
        columns:
                [
                    ['data1',Math.round(Math.random()*200)]
                ],
        type:'area-spline'
    })
}, 1500)

});
})
`

и ваш внешний файл JSON должен быть таким

файл linejson.json

{ "data1": [30, 20, 50, 40, 60, 50] }

HawiCaesar 1 нояб. 2016

👍2

У меня такая же проблема. Попытка оживить диаграмму потоком данных в реальном времени.
пробовал это:

var xhr = new XMLHttpRequest();
function reload(){
    //each call on this url changes the json
    xhr.open('GET', "http://127.0.0.1:5000/json/", true).send(); 
    chart.flow('http://127.0.0.1:5000/json/');
    chart.flush()
}

setInterval(reload, 500);

Пытался выполнить поток, сгенерировать, загрузить, и ни один из них не перезагружал диаграмму без необходимости перезагружать браузер.

Какие-нибудь советы?