Cargando un archivo csv en jQuery?

Question

Tengo un archivo CSV que me gustaría utilizar como fuente de datos para un gráfico jQuery flot.

¿Debo:

1. Encontrar un plugin de jQuery que cargue el archivo CSV directamente?
2. ¿Convierte el archivo CSV en JSON y lo usa en su lugar?
3. ¿Algo completamente diferente?

No estoy teniendo mucha suerte para encontrar un plugin de jQuery que pueda manejar un archivo CSV externo, pero tal vez me falta algo.

Answer 1

Utilice el complemento jQuery CSV para obtener una matriz. Construya/ordene la matriz como lo necesite para la gráfica.

jQuery CSV Plugin

Sólo se me ocurrió que puede estar pensando en la lectura de un archivo CSV plana con jQuery. Eso no es posible. Darle acceso a JavaScript al sistema de archivos suena como una idea terrible. Sin embargo, siempre puedes usar $.get() para cargar un archivo en un servidor.

Answer 2

No se requiere servidor ...

esto se puede lograr sin el servidor si usted emplea un poco de ingenio.

Tendrá 2 cosas:

• Un navegador que es capaz HTML5 File API
• La biblioteca jQuery-CSV

La biblioteca analizador jquery-csv se especializa en el análisis RFC 4180 CSV compatible, con muchas capacidades más allá de transformar datos de CSV en datos de JavaScript. Para el propósito de esta demostración, vamos a utilizar dos funciones:

El primero es el método toArrays(). Toma una cadena CSV de varias líneas y la transforma en una matriz 2D.

El segundo es un gancho del analizador definido por el usuario que transforma automáticamente la salida (que es todas las cadenas) en datos escalares (es decir, enteros/flotantes). Básicamente, mediante el uso de una función de devolución de llamada, es posible incorporar procesamiento adicional en el analizador.

Una vez que tiene los datos CSV asignados a una variable de cadena, la transformación a los datos de JavaScript es muy simple.

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

Eso es todo para el paso de análisis CSV.

---

Ahora, lo que Flot espera es una matriz de matrices 2D donde cada matriz 2D contiene un conjunto de datos independiente.

para construir sus datos crean una matriz vacía en primer lugar:

var flotData = []; 

Entonces, para cada conjunto de datos se generan usando CSV sólo tiene que añadir el conjunto de datos a la colección.

var flotData.push(data); 

El tratamiento de archivos a través de HTML5 es un tema complicado porque utiliza devoluciones de llamada asincrónicas para cargar archivos; eso significa que no hay declaraciones de devolución. Para mantener las cosas simples, haré que el flot trace un objeto global.

Primera inicializar la trama durante el ready $ (document)():

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

Nota: Se añade un objeto de datos ficticio para el gráfico se puede inicializar.

A continuación, agregue un controlador de archivo:

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

suponer que esto se puede cargar uno o más archivos de datos CSV. Se llama a esto después de elegir los archivos desde el cuadro de diálogo del archivo. Los datos se restablecen a vacíos (es decir, []) porque queremos comenzar de nuevo cada vez que se ejecuta el diálogo de archivos; de lo contrario, se agregará a un conjunto de datos anterior.

Este ciclo voluntad a través de los archivos y llamar a flotFileData() para cada archivo que se ha seleccionado en la ventana de archivos ..

Aquí está el código para manejar el archivo de devolución de llamada abierta:

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

Esto lee el archivo como texto sin formato y hace que el contenido esté disponible a través de event.target.result. El analizador de CSV transforma el CSV en datos escalares en forma de matriz bidimensional. Para apilar conjuntos de datos múltiples, necesitamos anexar los datos que ya están en el diagrama, por lo que debemos almacenar los datos existentes primero a través de flot.getData(). Agregue los datos nuevos, configúrelos mediante flot.setData() y finalmente vuelva a dibujar el gráfico.

Nota: Si no es necesario volver a calcular los rangos del gráfico, puede omitir la llamada flot.setupGrid().

Lo ideal es que el redibujado solo suceda una vez por fase de carga de archivos, pero esta demostración aún no se ha optimizado. Eso significa que el gráfico se volverá a dibujar para cada archivo que se lea (definitivamente no es ideal).

Si quiere verlo en acción, eche un vistazo a 'Flot Demonstration' proporcionado por el proyecto jquery-csv. Le sugiero que intente cargar los conjuntos de datos analytics1.csv y analytics2.csv para que pueda ver cómo se superponen ambos en el gráfico.

Si decide ir a la ruta del lado del servidor para cargar los archivos CSV, también hay un ejemplo más básico que demuestra la carga del CSV desde un área de texto.

Descargo de responsabilidad: soy el autor de jquery-csv.

Actualización:

Debido al encofrado de Google Code, jquery-csv has been moved to GitHub