Tutorial desarrollado por
Consultor tecnológico de desarrollo de proyectos informáticos. Constructor de Adictos Al Trabajo 2.0
Ingeniero en Informática
Puedes encontrarme en Autentia
Somos expertos en Java/J2EE
Catálogo de servicios de Autentia
Descargar en versión comic (17 MB)
AdictosAlTrabajo.com es el Web de difusión de conocimiento de Autentia.
Descargar este documento en formato PDF: pivotTable.pdf
Fecha de creación del tutorial: 2008-03-03
Tablas dinámicas “online”
Introducción
A raíz del comparador de salarios y de las gráficas que usamos para la explotación de los datos, nos dimos cuenta (ayudados por los comentarios de muchos de vosotros) de que las gráficas no ayudaban en un primer análisis de los datos, pero que para dar el siguiente paso, necesitábamos algo distinto, que permitiera combinar a nuestro antojo cualquiera de los datos entre sí. La solución fue una tabla dinámica en Excel. Pero queríamos una solución online, así que rebuscamos en Internet para encontrar un producto que satisficiera nuestras necesidades. Hasta que encontramos el producto que hoy os presentamos: el OpenLink AJAX Toolkit (OAT)
Cómo empezar
Lo primero es obtener el framework. Para ello, visitamos su página oficial
En esta página hay tres cosas importantes: el enlace de descarga, la información de licencia (os recomiendo leer siempre las licencias de los productos que uséis, os podéis evitar muchos problemas innecesarios.) y los “widgets”, donde encontraréis ejemplos de todo lo que podéis hacer con OAT.
Una vez que hemos leído la licencia, descargamos el producto (cuando se hizo este tutorial, la última versión era la 2.7, de diciembre de 2007) y lo descomprimimos
Dentro de todas estas carpetas, la más importante es la carpeta “oat”, que es la que contiene todos los scripts necesarios para hacer funcionar los widgets. Además, dentro de esa carpeta hay otra, “docs”, con documentación de todos los objetos y scripts. De hecho, vamos a tener esa documentación muy presente a la hora de crear nuestra tabla pivotante.
El otro elemento que tendremos en cuenta para crear nuestra tabla es el fichero “demo.js” que se encuentra en la carpeta “demo”. Esta demo es la misma que se puede ver cuando se accede a la página oficial de OAT.
Ya lo tenemos todo… vamos a empezar con el ejemplo
Ejemplo de tabla pivotante
Lo primero que necesitamos es una página web normal y corriente… y la documentación
Como nos dice en la documentación (en el apartado de “Basic Operation”), agregamos los elementos que queremos cargar. Para nuestra tabla pivotante vamos a usar dos: la propia tabla y un elemento que nos permitirá calcular agregaciones de distinto tipo para cada dato (media, mediana, desviación típica, valor máximo, valor mínimo…)
El HTML queda, pues, inicialmente, así:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<script type="text/javascript">
var featureList = ["pivot","statistics"];
</script>
<script type="text/javascript" src="oat/loader.js"></script>
<title></title>
</head>
<body>
</body>
</html>
El script “loader.js” se encarga de detectar que características queremos usar y generar dinámicamente todas las inclusiones de scripts necesarias para que funcione
ahora hay que crear la tabla pivotante. Mirando la documentación, vamos a ver como se declara una tabla pivotante. Según la documentación, vemos que la llamada javascript para crar una tabla es la siguiente
OAT.Pivot(div, chartDiv, filterDiv, headerRow, dataRows, headerRowIndexes,
headerColIndexes, filterIndexes, dataColumnIndex, optObj)
El siginificado de los parámetros, traduciendo la documentación es el siguiente:
- div
- Nombre (id) de la capa en que se pintará la tabla
- chartDiv
- Nombre (id) de la capa en que se pintará los gráficos asociados a la tabla. En este ejemplo no se van a usar
- filterDiv
- Nombre (id) de la capa en que colocarán las opciones de filtrado de la tabla
- headerRow
- Array con todos los nombres de los campos que se van mostrar en la tabla
- dataRows
- Tabla de datos. Es un array de arrays. Cada array debe tener el mismo número de campos que el "headerRow", y en el mismo orden
- headerRowIndexes
- Array con los índices de la lista de campos que se pintarán en el eje Y de la tabla
- headerColIndexes
- Array con los índices de la lista de campos que se pintarán en el eje X de la tabla
- filterIndexes
- Array con los índices de la lista de campos que se usarán como filtro
- dataColumnIndex
- posición de la lista en que se encuentra el campo que contiene el valor, es decir el dato que se pintará para cada combinación de X e Y
- optObj
- Se trata de unb objeto con opciones de configuración para determinadas propiedades de la tabla. su descripción viene en la documentación, así que no me extenderé en ello
O sea, que para seguir adelante hay que modificar el html, crear la tabla y las capas para albergar cada elemento. En nuestro caso, ya hemos dicho que no vamos a mostrar los gráficos, así que solo crearemos capas para la tabla y los filtros. Además, crearemos los arrays con los campos y con los datos. El nuevo HTML es el que sigue:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<script type="text/javascript">
var featureList = ["pivot","statistics"];
</script>
<script type="text/javascript" src="oat/loader.js"></script>
<script type="text/javascript">
var cabecera = new Array("campo1", "campo2", "campo3", "campo4", "campo5", "valor");
var datos = new Array();
var datos[0] = new Array("rojo", "1", "perro", "manzana", "juan", "5.5");
var datos[0] = new Array("azul", "2", "gato", "pera", "pedro", "8");
var datos[0] = new Array("verde", "3", "rata", "ciruela", "antonio", "6");
var datos[0] = new Array("amarillo", "4", "ardilla", "mandarina", "miguel", "4.7");
var pTable = new OAT.Pivot('tabla', '', 'filtros', cabecera, datos,
[0,1], [2,3], [4], 5, null)
</script>
<title></title>
</head>
<body>
<div id="filtros"></div>
<div id="tabla"></div>
</body>
</html>
Pero aún no se ve nada... hay que decir al script que pinte la tabla. Para ello,
vamos a hacer uso de otra recomendación que hace la documentación de OAT y usar
la función init, que se llamará automáticamente cuando se pinte la página.
este es el resultado de modificar el HTML
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<script type="text/javascript">
var featureList = ["pivot","statistics"];
</script>
<script type="text/javascript" src="oat/loader.js"></script>
<script type="text/javascript">
var cabecera = new Array('campo1', 'campo2', 'campo3', 'campo4', 'campo5', 'valor');
var datos = new Array();
datos[0] = new Array('rojo', '1', 'perro', 'manzana', 'juan', '5.5');
datos[1] = new Array('azul', '2', 'gato', 'pera', 'pedro', '8');
datos[2] = new Array('verde', '3', 'rata', 'ciruela', 'antonio', '6');
datos[3] = new Array('amarillo', '4', 'ardilla', 'mandarina', 'miguel', '4.7');
function init() {
var pTable = new OAT.Pivot('tabla', '', 'filtros', cabecera, datos,
[0,1], [2,3], [4], 5, null);
pTable.go();
}
</script>
<title></title>
</head>
<body>
<div id="filtros"></div>
<div id="tabla"></div>
</body>
</html>
Y una vez hecho esto, ya tenemos funcionando la tabla:
Aunque el resultado no es demasiado atractivo todavía... Para solucionarlo, en la documentación de OAT para el componente "pivot.js" encontramos los estilos (clases CSS) que se aplican a la tabla, y que podemos definir a nuestro gusto.
Para este ejemplo, vamos a hacerlo más fácil... vamos a coger los estilos que se aplican en la demo. Los podemos encontrar en la distribución que nos hemos descargado, en la carpeta "styles/pivot.css"
Copiamos los estilos en nuestro ejemplo... y vemos cómo mejora el resultado
Una vez que tenemos esto... vamos a ver como funciona:
- Si cambiamos el valor del combo, la tabla muestra solo los datos para el valor del combo seleccionado.
- Si pinchamos y arrastramos el nombre de una fila o columna, podemos colocarla donde queramos, incluso sacarla de la tabla y ponerla como filtro.
- Si pinchamos en la "X" roja al lado de los filtros, el campo pasa a la tabla.
- Si pinchamos en los nombres de las columnas (sin arrastrar), aparecen opciones de ordenación.
- Si pinchamos en el nombre del dato que se muestra en el cuepor de la tabla ("valor" en nuestro caso) aparecen opciones para pintar los datos en un formato u otro (como números enteros, como moneda...) y otras.
Funciones de agregación
Ya tenemos lo más importante funcionando, y ahora vamos a usar el otro componente que hemos instanciado (statistics). Para ello vamos a modificar la función "init", que queda así:
Vemos varios cambios en la función.
Primero, se ha definido una función, "aggRef". Esta función se encarga de repintar la tabla cada vez que se invoque, usando la función de agregación seleccionada.
Despues, un bucle que se encarga de rellenar un combo (un control "select" de HTML) con los distintas funciones disponibles.
Por último, se ha añadido una llamada a la función "attach", que asocia a un evento ("change") de un control HTML ("pivot_agg") una función ("aggRef") que se llamará cuando se produzca dicho evento.
Vamos a aprovechar también para añadir algunos datos más... y el HTML resultante será:
Y este es el resultado final:
Si cambiáis el valor del combo superior, veréis que los datos cambian según la función que seleccionéis
Conclusiones
Como hemos visto, el resultado final es bastante útil para manejar datos con múltiples variables. Combinándolo con un lenguaje de programación como PHP o Java se pueden crear conjuntos de datos a partir de lo almacenado en una base de datos...
Pero como no se puede tener todo, este componente tiene para mí un pequeño defecto... y es que trabaja con todos los datos en cliente... es decir, que si queremos manejar 10000 datos con 10 variables cada uno... imaginaos el tamaño del código que se puede transmitir entre servidor y cliente. Por otro lado, el componente de estadísticas tiene pequeños fallos con la agregación de campos vacíos...
Y hasta aquí este tutorial, en que os hemos presentado otro producto gratuito (con licencia GPL). Solo hemos visto una pequeña parte de lo que se puede hacer con OAT. Si queréis saber más, tenéis todos los medios para seguir adelante y, si preferís que sean otros los que os propongan soluciones creativas a vuestros problemas, recordad que podéis contratar a Autentia para que os ayude en vuestros proyectos informáticos
Anímate y coméntanos lo que pienses sobre este tutorial
Puedes opinar o comentar cualquier sugerencia que quieras comunicarnos sobre este tutorial; con tu ayuda, podemos ofrecerte un mejor servicio.
| Autor | Mensaje de usuario registrado |
|---|
- Puedes inscribirte en nuestro servicio de notificaciones haciendo clic aquí.
- Puedes firmar en nuestro libro de visitas haciendo clic aquí.
- Puedes asociarte al grupo AdictosAlTrabajo en XING haciendo clic aquí.
- Añadir a favoritos Technorati.
Esta obra está licenciada bajo licencia Creative Commons de
Reconocimiento-No comercial-Sin obras derivadas 2.5
Recuerda
Autentia te regala la mayoría del conocimiento aquí compartido (Ver todos los tutoriales). Somos expertos en: J2EE, Struts, JSF, C++, OOP, UML, UP, Patrones de diseño ... y muchas otras cosas.
¿Nos vas a tener en cuenta cuando necesites consultoría o formación en tu empresa?, ¿Vas a ser tan generoso con nosotros como lo tratamos de ser con vosotros?
Somos pocos, somos buenos, estamos motivados y nos gusta lo que hacemos ...
Autentia = Soporte a Desarrollo & Formación.
Tutoriales recomendados
| Nombre | Resumen | Visitas | Valoración | Votos | ||
|---|---|---|---|---|---|---|
| PHP Vs Java | El cometido de este documento es el de realizar un análisis en profundidad de dos tecnologías ampliamente aceptadas por la comunidad diseñadora de portales web, como son PHP y Java. | 2010-01-04 | 1637 | - | - |  |
| Analizando la calidad del código Java con Sonar | En este tutorial vamos a dar a conocer la herramienta Sonar para el control de la calidad del código de nuestros proyectos | 2009-12-07 | 1591 | - | - | |
| Estilos externos en iReport | Cómo aplicar estilos externos a nuestros informes mediante el uso de plantillas | 2009-10-26 | 2607 | Muy bueno | 1 | |
| iReport : Solución al problema de los parámetros dinámicos. | En este tutorial acerca de iReport, tratamos la solución al problema de los parámetros dinámicos e introducción a los ficheros "jrxml" | 2009-09-28 | 2939 | - | - | |
| Ordenación por cantidades en informe cruzado | Nico nos explica en ese tutorial cómo lograr ordenar por cantidades en informes cruzados usando JasperReports e iReport | 2009-08-26 | 2100 | - | - | |
| Joomla 1.5. Instalación y configuración | Veamos en detalle cómo instalar Joomla 1.5 y aplicar algunas configuraciones posteriores de las disponibles en este CMS | 2009-08-14 | 9256 | - | - | |
| Informes Crosstab con iReport | Con este tutorial vamos a ampliar el nivel de conocimiento sobre iReport enseñando como hacer un informe usando crosstab o tablas dinámicas | 2009-04-16 | 7448 | - | - | |
| JasperReports Maven Plugin | JasperReports Maven Plugin es un plugin de Maven que nos permite compilar nuestros informes JasperReports. | 2009-03-20 | 4190 | - | - | |
| Maven JXR Plugin: publica el código fuente en el site | JXR es un plugin para maven, de tipo reporting, que genera en el site un informe con los fuentes java de tu aplicación: "Source Xref". | 2009-02-26 | 2433 | - | - | |
| Replicar Web PHP en máquina local | Si acabais de empezar como administradores de un sitio web y andais un poco perdidos, este es vuestro tutorial. Os enseñaremos como trabajar con la web de forma local como lo hariamos de manera real. | 2009-02-18 | 2393 | - | - | |
Nota:
Los tutoriales mostrados en este Web tienen como objetivo la difusión del conocimiento.
Los contenidos y comentarios de los tutoriales son responsabilidad de sus respectivos autores.
En algún caso se puede hacer referencia a marcas o nombres cuya propiedad y derechos es de sus respectivos dueños. Si algún afectado desea que incorporemos alguna reseña específica, no tiene más que solicitarlo.
Si alguien encuentra algún problema con la información publicada en este Web, rogamos que informe al administrador rcanales@adictosaltrabajo.com para su resolución.
