C3: बाहरी JSON फ़ाइल का उपयोग करके गतिशील रूप से चार्टिंग

को निर्मित 15 अक्तू॰ 2016 · 3टिप्पणियाँ · स्रोत: c3js/c3

इस महान ओपन सोर्स लाइब्रेरी को बनाने के लिए मैं आपको धन्यवाद देना चाहता हूं।
मैं बाहरी 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 इसे आजमाएं
`
$ (फ़ंक्शन () {

$.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 फ़ाइल इस प्रकार है

लाइनजेसन.जेसन फ़ाइल

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

HawiCaesar 1 नव॰ 2016

👍2

सभी 3 टिप्पणियाँ

@AskSaikatSinha इसे आजमाएं
`
$ (फ़ंक्शन () {

$.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 फ़ाइल इस प्रकार है

लाइनजेसन.जेसन फ़ाइल

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

प्रवाह की कोशिश की

कोई सुझाव?