C3: Dynamisches Charting mit externer JSON-Datei
Ich möchte Ihnen für die Erstellung dieser großartigen Open-Source-Bibliothek danken.
Ich möchte dynamische Diagramme mit einer externen JSON-Datei erstellen, in der die Diagramme jeweils Json-Daten analysieren.
Mein aktueller Code:
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
}
});
Beispiel für das erforderliche Diagramm: https://jsfiddle.net/cy2owjva/
Bitte lassen Sie mich wissen, welche Änderung ich in https://jsfiddle.net/cy2owjva/ vornehmen muss.
Danke schön
Saikat-Sinha
Alle 3 Kommentare
@AskSaikatSinha Versuchen Sie es
`
$(Funktion () {
$.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)
});
})
`
und haben Sie Ihre externe JSON-Datei so
linejson.json-Datei
{
"data1": [30, 20, 50, 40, 60, 50]
}
HawiCaesar
am 1. Nov. 2016
Ich bin beim selben Problem. Versuch, ein Diagramm mit einem Strom von Echtzeitdaten zu animieren.
habe das probiert:
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);
Versucht , das Diagramm zu
Irgendwelche Tipps?
oxydron
am 19. Juni 2017
@HawiCaesar Vielen Dank, Ihr Code funktioniert.
Sallaa
am 22. Sept. 2017
Verwandte Themen
DieterSpringer
·
4Kommentare
udhaya2kmrv
·
3Kommentare
u119102
·
3Kommentare
unlight
·
3Kommentare
alantygel
·
3Kommentare
Hilfreichster Kommentar
@AskSaikatSinha Versuchen Sie es
`
$(Funktion () {
});
})
`
und haben Sie Ihre externe JSON-Datei so
linejson.json-Datei
{ "data1": [30, 20, 50, 40, 60, 50] }