Chargement de fichier csv dans jQuery?
J'ai un fichier CSV que je voudrais utiliser comme source de données pour un jQuery flot graphique.
Devrais-Je:
- Trouver un plugin jQuery qui vous permettra de charger le fichier CSV directement?
- Convertir le fichier CSV en JSON et l'utiliser à la place?
- Faire quelque chose de complètement différent?
Je ne suis pas du avoir beaucoup de chance de trouver un plugin jQuery qui peut faire face avec un fichier CSV, mais peut-être que je suis absent quelque chose.
Il ressemble à convertir le fichier CSV JSON est votre meilleur pari ici. Vous pourriez écrire un côté serveur de l'analyseur, si il n'y a pas déjà un (peu probable).
JSON conversion et le code côté serveur sont totalement inutiles ici. Voir ma réponse pour plus de détails.
JSON conversion et le code côté serveur sont totalement inutiles ici. Voir ma réponse pour plus de détails.
OriginalL'auteur Richard | 2011-10-04
Vous devez vous connecter pour publier un commentaire.
Utiliser le jQuery CSV plugin pour obtenir un tableau. Construire /trier le tableau cependant vous avez besoin pour le graphique.
jQuery Plugin CSV
Il juste de se dérouler pour moi, vous envisagez peut-être de la lecture d'une télévision fichier CSV avec jQuery. Ce n'est pas possible. Donnant accès javascript pour le système de fichiers sons comme une idée terrible. Vous pouvez toujours utiliser
$.get()
pour charger un fichier sur un serveur.$.get()
pour obtenir les données, puis de le convertir en un tableau à l'aide de la CSV plugin?$.get() vous permet d'obtenir une chaîne de caractères contenant les données au format CSV. Passage que le CSV plugin va vous donner un tableau. Vous pouvez ensuite modifier ce tableau cependant vous avez besoin de sorte qu'il est dans un format graphique script va accepter. La plupart des graphiques scripts vont accepter des données sous forme de tableau, de sorte que la partie ne devrait pas être difficile.
génial, merci!
Hm, en fait, si j'essaie de me trouver un
text.split is not a function
erreur javascript - ressemble$.csv
attend une chaîne de caractères, mais les données renvoyées par$.get()
est un objet. Je suppose que je pourrais essayer ceci: stackoverflow.com/questions/5612787/... mais il se sent comme il est de se salir...api.jquery.com/jQuery.get/#jqxhr-object . Je n'appellerais pas ça sale, c'est comment tout cela est fait avec du Javascript.
OriginalL'auteur Chris G.
Pas de serveur...
Ceci peut être accompli sans le serveur si vous employez un peu d'ingéniosité.
Vous aurez besoin de 2 choses:
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.
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:
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.
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():
Remarque: Un mannequin objet de données est ajouté de sorte que le graphique peut être initialisé.
Ensuite, ajoutez un gestionnaire de fichier:
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:
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
Merci, je l'apprécie. Juste essayer de faire ma part pour que le JS écosystème un peu mieux.
OriginalL'auteur Evan Plaice