Highcharts dynamisch aktualisieren Diagramm aus CSV-Datei

Ich habe die dynamic spline jsfiddle auf highcharts Dokumentation Seite studiert. Dort verwenden sie Math.random(), um die Daten zu aktualisieren und sie der Serie hinzuzufügen.Highcharts dynamisch aktualisieren Diagramm aus CSV-Datei

Vom doc, ich weiß auch, wie typische csv files auf einmal laden (von rapid highcharts oder mit ausgezeichneten Code:

function parseCSVData(csvFile) { 
var data = [] 
var lines = csvFile.split("\n") 
$.each(lines, function (lineNumber, line) { 
    var fields = line.split(","); 
    if (fields.length == 2){ 
     var timestamp = Date.parse(fields[0]) 
     var value = parseFloat(fields[1]); 
     data.push([timestamp, value]) 
    } 
}) 
return data}

)

Was ich will ist zu tun:

lesen Sie eine Zeile der CSV-Datei
aktualisieren Sie das Diagramm
Pause für 1 Sekunde
Redo oben bis zum Ende der Datei

und damit eine Echtzeit-Anwendung imitieren.

Allerdings kann ich nicht einfach unter event : load setzen, da es keine Möglichkeit gibt zu verfolgen, welche Zeilen zuvor gelesen wurden. Die Beispiele, wo sie Daten in Echtzeit abrufen, verwenden alle eine Art von api oder Websocket, was für mich zu fortgeschritten ist und in meinem Fall sowieso nicht verwendbar ist.
Say my csv-Datei sieht wie folgt aus: (sample.csv)

t observed 1 19 2 12 3 28 4 17 5 85 6 22 7 86 8 16 9 90 10 93 11 39 12 96 13 42 14 74 15 100 16 22 17 41 18 32

Gibt es eine Möglichkeit, die oben genannten Schritte in einer relativ einfachen Art und Weise durchzuführen? my jsfiddle

Quelle

2016-04-07 Pep

können Sie es wie in der Spline-Beispiel? Mit dem settimeout, das sie dort haben, benutzen sie nicht math.random, um die Daten zu aktualisieren, sie verwenden es, um zufällige Daten zu erzeugen, das setTimeout ist, was es aktualisiert können Sie uns zeigen, wie Ihr Diagramm jetzt in einer Geige aussieht? – JordanHendrix

Sie verwenden 'setInterval', um neue Daten zu generieren und jede Sekunde an die Serie anzuhängen. Ich kann das hier nicht tun, da ich verfolgen muss, welche Zeilen bisher gelesen wurden. Jeder Code, der unter "event: load" steht, kann keine Referenz früherer Aktionen behalten. Ich habe keine funktionierende Geige wirklich, aber das ist am nächsten dazu: https://jsfiddle.net/f2ph7jap/ – Pep

Sie könnten mit der Analyse aller CSV-Daten in ein Array beginnen. Als nächstes wird dieses Array in 'setInterval' wiederholt, bis alle Arrays hinzugefügt sind, und dann das Intervall löschen. Definieren Sie die externe Intervallfunktion von Array und Iterator, damit auf alle Iterationen zugegriffen werden kann. –

Wie wäre es mit einer Variablen für den nächsten Array-Index, den Sie plotten müssen?

setInterval(function() { 
    if(window.nextIndex===undefined){ 
     window.nextIndex=0; 
    }else{ 
     window.nextIndex++; 
    }       
    series.addPoint(data[window.nextIndex], true, true); 
}, 1000);

Quelle

2016-04-11 17:50:36

Wenn Sie durchlaufen werden über Datenarray analysiert Iterator außerhalb von setInterval definiert, dann könnte man Punkt auf jeder Iteration laden. Wenn der Iterator die Länge der verfügbaren Daten erreicht, können Sie das Intervall mit clearInterval löschen.

Zum Zwecke der JSFiddle-Demo laden wir CSV-Daten aus HTML.

Beispiel basiert auf dem Code: http://jsfiddle.net/qkxda04n/

Quelle

2016-04-13 11:52:37

Danke, das ist genau das, was ich brauchte. Ein bisschen unabhängig, aber ist es möglich, Zoom-Ebenen und "Von" "Bis" zu entfernen? – Pep

@Pep Ja, setze einfach 'rangeSelector: {enabled: false},' - Beispiel: http://jsfiddle.net/qkxda04n/1/ –

Highcharts dynamisch aktualisieren Diagramm aus CSV-Datei

Antwort

Verwandte Themen