Laden von csv-Datei in jQuery?

Keinen server...

Kann dies erreicht werden, ohne den server wenn Sie beschäftigen ein wenig Einfallsreichtum.

Sie müssen 2 Dinge:

• Einen browser, der HTML5-Datei-API fähig
• Die jQuery-CSV Bibliothek

Den jquery-csv-parser-Bibliothek ist spezialisiert in der Analyse RFC 4180 - kompatiblen CSV-Format, mit vielen Fähigkeiten jenseits nur die Umwandlung der CSV-Daten in JavaScript-Daten. Für die Zwecke dieser demonstration verwenden wir zwei Funktionen:

Die erste ist die toArrays () - Methode. Es dauert eine multi-line-CSV-string, und wandelt es in ein 2D-array.

Die zweite ist eine benutzerdefinierte parser hook, der automatisch wandelt die Ausgabe (die alle Zeichenfolgen) in Skalare (also integer/float) - Daten. Im Grunde, durch die Verwendung einer callback-Funktion, ist es möglich, inline zusätzliche Verarbeitung in der parser.

Sobald Sie die CSV-Daten zugeordnet zu einer string-Variablen zu transformieren, um JavaScript-Daten ist sehr einfach.

var csv = "" //this is the string containing the CSV data
var data = $.csv.toArray(csv, {
  onParseValue: $.csv.hooks.castToScalar
});

Das ist alles für die CSV-parsing-Schritt.

Nun, was Flot erwartet ein array von 2D-arrays, wobei jede 2D-array enthält einen unabhängigen Datensatz.

Zu bauen, Ihre Daten zu erstellen, wird ein leeres array zuerst:

var flotData = [];

Dann für jeden Datensatz generieren Sie mithilfe von CSV-fügen Sie einfach die dataset-Sammlung.

var flotData.push(data);

Datei-handling via HTML5 ist ein heikles Thema, weil es verwendet asynchrone Rückrufe, um Dateien zu laden; Sie haben also keine return-Anweisungen. Dinge einfach zu halten, werde ich nur die flot Grundstück ein globales Objekt.

Ersten initialisieren der plot während die $(document).ready():

var data = [];
flot = $.flot($('#plotdiv'), data, options);

Hinweis: Eine dummy-Daten-Objekt Hinzugefügt wird, so kann der graph initialisiert werden.

Dann fügen Sie eine Datei-handler:

//handles csv files
function handleFileSelect(evt) {
  var files = evt.target.files; //FileList object

  //reset the flot dataset
  flot.setData([]);
  for(var i=0, len=files.length; i<len; i++) {
    flotFileData(files[i], i);
  }
}

Davon ausgehen, dass dieser laden kann einen oder mehrere CSV-Daten-Dateien. Diese wird aufgerufen, nachdem Sie wählen Sie Ihre Dateien aus dem Datei-dialog. Die Daten bekommt-reset auf leer (also []) weil wir möchten, beginnen Sie frisch, nachdem jedes mal über den Datei-dialog ausgeführt wird; andernfalls werden Sie Anhängen, um einen vorherigen Datensatz.

Wird dieser Zyklus durch die Dateien und rufen Sie flotFileData() für jede Datei, die ausgewählt wurde, in der Datei-dialog..

Hier ist der code für die Behandlung der Datei-öffnen-Rückruf:

function flotFileData(file, i) {
  var reader = new FileReader();
  reader.readAsText(file);
  reader.onload = function(event){
    var csv = event.target.result;
    var newData = $.csv.toArrays(csv, {
      onParseValue:$.csv.hooks.castToScalar
    });
    var data = flot.getData();
    data[i] = newData;
    flot.setData(data);
    flot.setupGrid();
    flot.draw();
  };
  reader.onerror = function(){ alert('Unable to read ' + file.fileName); };
}

Dieser liest die Datei als nur-text und macht den Inhalt zur Verfügung über die Veranstaltung.Ziel.Ergebnis. Der CSV-parser wandelt die CSV-Skalare Daten im 2-dimensionale array-form. Stapeln Sie mehrere datasets müssen wir anfügen", um die Daten, die bereits in der Darstellung, so müssen wir speichern die vorhandenen Daten zunächst über flot.getData(). Fügen Sie die neuen Daten, legen Sie es über flot.setData () - und endlich wieder zeichnen, die.

Hinweis: Wenn die Bereiche des Graphen müssen nicht erneut berechnet, können Sie überspringen die flot.setupGrid () - Aufruf.

Ideal, das Neuzeichnen sollte nur einmal pro Datei loading phase, aber diese demo noch nicht optimiert wurde, noch. Das bedeutet, der graph wird neu gezeichnet, für jede Datei, die gelesen (sicher nicht ideal).

Wenn Sie wollen, um ihn in Aktion zu sehen, werfen Sie einen Blick auf die 'Flot-Demonstration' zur Verfügung gestellt, die von der jquery-csv-Projekt. Ich schlage vor, Sie versuchen, laden sowohl die analytics1.csv und analytics2.csv-Datensätze, so können Sie sehen, wie beide überlagert auf dem Graphen.

Wenn Sie sich entscheiden, um die server-Seite route zum laden der CSV-Dateien, es gibt auch noch ein einfaches Beispiel zeigt das laden der CSV aus einer textarea.

Disclaimer: ich bin der Autor von jquery-csv.

Update:

Aufgrund der Schließung der Google-Code, jquery-csv-wurde verschoben auf GitHub