Chargement de fichier csv dans jQuery?

Pas de serveur...

Ceci peut être accompli sans le serveur si vous employez un peu d'ingéniosité.

Vous aurez besoin de 2 choses:

• Un navigateur qui est HTML5 Fichier API capable
• La jQuery-CSV bibliothèque

Jquery csv parser se spécialise dans l'analyse RFC 4180 conforme CSV, avec de nombreuses fonctionnalités ci-dessus et au-delà de simplement transformer des données CSV dans le JavaScript de données. Pour les besoins de cette démonstration, nous allons utiliser deux caractéristiques:

La première est la toArrays() la méthode. Il faut un multi-ligne CSV chaîne et la transforme en un tableau 2D.

La seconde est définie par l'utilisateur de l'analyseur de crochet qui transforme automatiquement la sortie (qui est de toutes les chaînes) dans scalaire (c'est à dire entier/flottant) de données. En gros, grâce à l'utilisation d'une fonction de rappel, il est possible de inline traitement supplémentaire dans l'analyseur.

Une fois que vous avez les données au format CSV, affecté à une variable de chaîne de la transformation de JavaScript données est très simple.

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

C'est tout pour le CSV analyse de l'étape.

---

Maintenant, ce Flot attend est un tableau 2D tableaux où chaque tableau 2D contient des données indépendantes.

Pour construire vos données créer un tableau vide d'abord:

var flotData = [];

Ensuite, pour chaque ensemble de données que vous générez au format CSV, vous ajoutez simplement le jeu de données de la collection.

var flotData.push(data);

Gestion des fichiers via HTML5 est un sujet difficile car il utilise des rappels asynchrones pour charger des fichiers; ce qui signifie que pas de retour des déclarations. Pour garder les choses simple, je vais juste faire le flot de la parcelle un objet global.

D'abord initialiser la parcelle au cours de l' $(document).prêt():

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

Remarque: Un mannequin objet de données est ajouté de sorte que le graphique peut être initialisé.

Ensuite, ajoutez un gestionnaire de fichier:

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

Supposer que cela peut charger un ou plusieurs fichiers de données CSV. Ceci est appelé après que vous choisissez vos fichiers à partir de la boîte de dialogue de fichier. Les données sont réinitialisées à vide (c'est à dire []) parce que nous voulons recommencer à zéro chaque fois que la boîte de dialogue de fichier est exécuté, sinon vous serez en les ajoutant à un précédent jeu de données.

Cela permettra de faire défiler les fichiers et de les appeler flotFileData() pour chaque fichier qui a été sélectionné dans la boîte de dialogue de fichier..

Voici le code pour la gestion des l'ouverture de fichier rappel:

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

Ce lit le fichier en tant que texte brut et rend le contenu disponible via un événement.cible.résultat. Le CSV analyseur transforme le CSV pour les données scalaires dans le tableau en 2 dimensions de la forme. La pile de multiples ensembles de données, nous avons besoin d'ajouter aux données qui sont déjà dans l'intrigue, nous avons donc besoin de stocker les données existantes d'abord par flot.getData(). Ajouter de nouvelles données, défini par flot.setData() et enfin re-dessiner le tracé.

Remarque: Si l'amplitude du graphique n'avez pas besoin d'être re-calculé, vous pouvez passer le flot.setupGrid ().

Idéalement, le redessiner, ne devrait se produire qu'une seule fois par fichier de phase de chargement, mais cette démonstration n'a pas été encore optimisé. Cela signifie que, le graphique sera à nouveau tirés au sort pour chaque fichier lu (certainement pas l'idéal).

Si vous voulez le voir en action, jetez un coup d'oeil à la " Flot De Démonstration ' fournis par le jquery-csv projet. Je suggère que vous essayez de charger à la fois la analytics1.csv et analytics2.csv ensembles de données de sorte que vous pouvez voir comment les deux sont superposés sur le graphique.

Si vous décidez d'aller le serveur-côté de la route pour charger les fichiers CSV, il y a aussi un autre exemple qui illustre le chargement du fichier CSV à partir d'un textarea.

Avertissement: je suis l'auteur de jquery-csv.

Mise à jour:

En raison à la fois de coffrage de Google Code, jquery-csv a été déplacé vers GitHub

OriginalL'auteur Evan Plaice