LIBRERÍA PARA LA REPRESENTACIÓN DE GRÁFICOS ESTADÍSTICOS UTILIZANDO SVG

Introducción

Uno de los objetivos más importantes de una nueva tecnología es tener un uso generalizado en su entorno de aplicación. Este proceso no siempre es fácil si otras tecnologías están disponibles con el mismo propósito. La nueva tecnología tendrá que penetrar en el mercado paso a paso, definiendo aplicaciones útiles para áreas temáticas específicas. SVG es una tecnología estándar diseñada por World Wide Web Consortium para representar gráficos vectoriales. Hoy en día, esta tecnología está todavía infrautilizada. Otra tecnología, llamada Flash, controla el 90% del mercado. A pesar de ser una importante tecnología del W3C y el gran número de compañías tras él, SVG necesitará un conjunto considerable de pequeñas contribuciones para llegar a una posición distinguida en el área de los gráficos vectoriales. El propósito de este trabajo es ser una de estas pequeñas contribuciones, y ayudar a SVG a convertirse en la tecnología principal en este campo.

Objetivo

El objetivo principal de este trabajo es implementar una librería de funciones que nos permitan definir dinámicamente representaciones gráficas de datos estadísticos. Utilizando el DOM (Document Object Model) de un archivo SVG vacío, seremos capaces de generar gráficos usando un conjunto de funciones definidas en javascript que cargan los datos dinámicamente.

La librería nos permitirá representar diferentes tipos de gráficos, tales como histogramas, gráficos de dispersión, gráficos de evolución, etc. Este tipo de representaciones son muy utilizadas para presentar información extraída de herramientas de análisis, gestores encuestas y cualquier sistema que resuma datos numéricos. Algunos de estos gráficos son representados en esencia en la figura 1.

Figura 1: Algunos gráficos estadísticos

La posibilidad de extraer esta información desde una base de datos y generar los gráficos en tiempo real es una característica muy utilizada. Además, un gráfico SVG puede reemplazar otras herramientas como applets java, cuyos tiempos de carga son bastante largos, o aplicaciones en Flash que están basadas en una tecnología cerrada. En la figura 2, se muestra un ejemplo de applets java para representación estadística. Aunque su calidad es muy alta (malla, barras de desplazamiento, leyendas, etc), estas herramientas normalmente presentan problemas de rendimiento, así que si se requiere una respuesta rápida, no se recomienda su uso. En el caso de Flash, pese al hecho de que estos archivos pueden ser cargados rápidamente, su uso presenta otros problemas derivados del hecho de ser una tecnología cerrada. Además, SVG es una tecnología multidispositivo, así que puede ser utilizada en PCs, teléfonos móviles, etc.

Figura 2: un applet java para la representación de gráficos estadísticos

Trabajo propuesto

La idea principal de este trabajo es utilizar el DOM para generar gráficos estadísticos al mismo tiempo que se cargan los datos desde un sistema de información, como por ejemplo, una base de datos relacional, un datawarehouse, o un fichero. Un gráfico SVG puede ser incluído fácilmente en una página Web usando una etiqueta <object>. Si el archivo SVG puede recibir datos mientras se está cargando, será posible generar dinámicamente representaciones gráficas para estos datos.

Con este propósito, pueden ser incluídas diferentes funciones en el fichero SVG. Estas funciones pueden modificar el DOM del documento SVG y crear nuevos hijos en una estructura básica de SVG. Cada hijo puede ser un nuevo elemento en el gráfico, tales como una barra, un punto, el título,o un eje. En la figura 3 se presenta un diagrama con el proceso de generación. Se necesitan tres pasos para llevar a cabo este proceso:

Extraer los datos desde el sistema de información. Pueden utilizarse diferentes tipos de herramientas con este propósito, tales como java servets, php, asp, etc.
Cargar el fichero SVG usando un conjunto de funciones javascript.
Presentar el resultado gráfico SVG en una página Web.

Figura 3: Gráfico del Proceso de generación

Estas funciones tienen que convertir datos numéricos en diferentes tipos de representación dependiendo del tipo de gráfico, por ejemplo, barras para histogramas, puntos para gráficos de dispersión, y ubicarlos en una posición específica.

Además, algunas funciones serán diseñadas para incluir diferentes elementos auxiliares en los gráficos. Por ejemplo:

Título: Poner el título del gráfico.
Malla: Activar o desactivar la malla.
Escala: Poner la escala de valores del gráfico.
Títulos de ejes: Explicar el significado de los ejes variables.
Leyenda: Mostrar la leyenda de los ejes.
Valores numéricos: Muestra valores numéricos de los datos numéricos.
Colores: Usando colores diferentes en los gráficos.

Otras características interesantes pueden añadirse, tales como representaciones 3D y gráficos animados. Gracias a las fantásticas capacidades de animacion de SVG, un gráfico puede convertirse en una poderosa herramienta interactiva.

Ejemplo

Un ejemplo básico de esta librería puede ser el código presentado en la siguiente caja. Es solo una primera aproximación, pero muestra perfectamente el objetivo de este trabajo.

<?xml version="1.0" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="800" height="800" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 400">
<script type="text/ecmascript"> <![CDATA[
SVGDocument = null;
parent.setPoint = setPoint;
parent.setTitle= setTitle;
////////////////////////////////////////////////////////////////////
//
// SET TITLE
//
////////////////////////////////////////////////////////////////////
function setTitle(text)
{
// creating the title
var title= document.createElement('text');
// style a properties
title.setAttribute('x', 40);
title.setAttribute('y',20);
title.setAttribute('fill', 'black');
title.setAttribute('font-family','arial');
title.setAttribute('font-size',40);
var child =document.createTextNode(text);
titulo.appendChild(hijo);
// adding the new child
var contend= document.getElementById('contend');
title = contend.appendChild(title);
}
////////////////////////////////////////////////////////////////////
//
// SET POINT
//
////////////////////////////////////////////////////////////////////
function setPoint(x, y, color)
{
// creating a new point
var point= document.createElement('rect');
// setting style and properties
var width= 2;
var height= 2;
point.setAttribute('x', x+30);
point.setAttribute('y', y+30);
point.setAttribute('width', width);
point.setAttribute('height',height);
point.setAttribute('stroke', color);
// adding the new child
var contend= document.getElementById('contend');
point = contend.appendChild(point);
}
]]>
</script>
<g id="contend" >
<rect fill="none" stroke="black" stroke-width="1" width="740" height="740" x="30" y="30" />
</g>
</svg>

El archivo SVG tiene dos partes. Una de ellas es un esqueleto básico de un gráfico SVG, y la otra es un conjunto de funciones capaces de añadir nuevos elementos al gráfico. En este caso, se han diseñado dos funciones: una para dibujar puntos en un gráfico de dispersión y otra para poner un título al gráfico. El resultado es una herramienta para generar gráficos con datos extraídos desde un sistema de información.

<script language="Javascript">
function load()
{
window.setPoint(50,530,'red');
window.setPoint(24,5,'red');
window.setPoint(360,34,'blue');
window.setPoint(5,43,'blue');
window.setPoint(50,550,'red');
window.setPoint(254,5,'red');
window.setPoint(30,324,'blue');
window.setPoint(5,43,'blue');
window.setPoint(250,50,'red');
window.setPoint(224,5,'red');
window.setPoint(320,324,'blue');
// ...
window.setPoint(5,423,'blue');
window.setTitle('Video Length vs Reproduction Length');
}
</script>

Para cargar los datos, las funciones diseñadas pueden invocarse desde la página web donde el gráfico SVG ha sido incluído. Usando herramientas tales como PHP, ASP o JSP, los datos se extraerán desde una base de datos y se cargarán en el gráfico usando las funciones diseñadas.

Se muestra el resultado de este ejemplo básico en la figura 4.

Figura 4: Resultado del ejemplo

Cristina González Cachón

Cristina González Cachón Cristina nació en Cangas del Narcea (Asturies) el día 8 de Diciembre de 1984. Actualmente, está estudiando tercero de Ingeniería Técnica de Telecomunicaciones, en la especialidad de Telemática en la Escuela de Ingeniería Técnica Informática de Gijón en la Universidad de Oviedo. Además, está realizando prácticas en el servicio de noticias por internet de La Nueva España. e-mail: peipa60@hotmail.com