Normalmente, cuando estamos trabajando con la representación de conjuntos de datos en un entorno web, recurrimos a nuestro tan adorado jQuery en busca de un plugin que sea capaz de darnos la funcionalidad básica de un grid donde podamos representar los datos que necesitamos. Además, siempre es deseable poder realizar una ordenación desde cualquiera de sus columnas, así como una paginación fluida de los datos.
PivotTable.js nos brinda la oportunidad de poder pivotar cualquiera de los datos representados, con lo que las posibilidades de enriquecer la interfaz de usuario con el fin de analizar los datos representados aumentan significativamente.
Básicamente, PivotTable.js nos permite tener una funcionalidad similar al PowerPivot de Excel, convirtiendo nuestro conjunto de resultados en una tabla de resumen en la que podemos agrupar cualquier columna del conjunto. Además, podremos visualizarla en diferentes formatos y aplicar plugins de terceros para obtener más visualizaciones.
Esta librería fue desarrollada originalmente en CoffeeScript por Nicolas Kruchten. Para instalarla y poder hacer uso de ella, necesitaremos jQuery.
Para poder utilizar PivotTable.js, podemos descargar los ficheros necesarios desde aquí:
- https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.0.1/pivot.min.css
- https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.1.0/pivot.min.js
- https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.0.2/tips_data.min.js
Una vez incluidas estas dependencias, estaremos en disposición de crear nuestra tabla de resumen. En este punto podemos invocar dos métodos: pivot(), que nos creará una simple tabla con las filas y columnas definidas en el conjunto de datos que estemos cargando, y pivotUI(), que nos añade todas las columnas del dataset en una cabecera para que podamos arrastrarlas y organizarlas a nuestro antojo.
Por ejemplo, podemos escribir el siguiente código para crear nuestra primera tabla de prueba:
[sourcecode language=»javascript»]
$(«#output»).pivotUI(
$.pivotUtilities.tipsData, {
rows: [«sex»],
cols: [«smoker»],
vals: [«tip», «total_bill»],
aggregatorName: «Sum over Sum»,
rendererName: «Bar Chart»,
renderers: $.extend(
$.pivotUtilities.renderers,
$.pivotUtilities.c3_renderers
)
});
[/sourcecode]
El ejemplo toma como referencia un conjunto de datos en el que se representan las propinas recogidas por un restaurante ficticio durante los servicios de comidas y cenas.
Lo que se representa en el gráfico es el porcentaje de propina con respecto al total de la factura, por comensal, teniendo en cuenta el género y si se es fumador o no. Los conceptos de género y fumador se encuentran en ejes opuestos y podemos cambiar la comparación en cualquier momento arrastrando cualquiera de las columnas incluidas en el conjunto de datos.
La función Sum over Sum en realidad es lo que se llama un “aggregator” (https://github.com/nicolaskruchten/pivottable/wiki/Aggregators), que no es más que una función que transforma un objeto de entrada en un valor, siendo éste el paso en el que podremos insertar nuestra lógica si es necesario, o también podemos utilizar los que ya vienen definidos. Este valor de salida es el que acaba siendo representado en la tabla final.
Además de los “aggregators” (que define el qué), nos encontramos con los “renderers” (https://github.com/nicolaskruchten/pivottable/wiki/Renderers), que definen el cómo se renderiza la información. De manera similar, podemos también definir nuestros propios renderers, aunque, en la mayoría de ocasiones, los que vienen ya definidos cubrirán nuestras necesidades.
Podemos encontrar diferentes renderers, para renderizar los resultados como líneas, por ejemplo, seleccionando el renderer de tipo “Linea Chart”:
Con esta librería, podremos preparar informes de manera rápida en un entorno web e interactuar con ellos cómodamente. La documentación podéis consultarla en GitHub: https://github.com/nicolaskruchten/pivottable.
Happy Coding!
Si queréis comentarnos lo que sea, podéis hacerlo en info@kabel.es.
También podéis seguirnos en Twitter y LinkedIn.
