C3: Creación de gráficos dinámicamente utilizando un archivo JSON externo

Creado en 15 oct. 2016 · 3Comentarios · Fuente: c3js/c3

Me gustaría agradecerle por crear esta gran biblioteca de código abierto.
Quiero crear gráficos dinámicos utilizando un archivo JSON externo en el que el gráfico analiza los datos json de uno en uno.
Mi código actual:
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 } });

Ejemplo del gráfico requerido: https://jsfiddle.net/cy2owjva/

Hágame saber qué cambio tengo que hacer en https://jsfiddle.net/cy2owjva/ .
Gracias

Fuente

Saikat-Sinha

Comentario más útil

@AskSaikatSinha Prueba esto
'
$ (función () {

$.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)

});
})
'

y tenga su archivo JSON externo así

archivo linejson.json

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

HawiCaesar en 1 nov. 2016

👍2

Todos 3 comentarios

@AskSaikatSinha Prueba esto
'
$ (función () {

$.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)

});
})
'

y tenga su archivo JSON externo así

archivo linejson.json

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

HawiCaesar en 1 nov. 2016

👍2

Estoy en el mismo problema. Intentando animar un gráfico con un flujo de datos en tiempo real.
probé esto:

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);

Intenté fluir, generar, cargar y ninguno de ellos recarga el gráfico sin necesidad de volver a cargar el navegador.

¿Algun consejo?