Open Flash Chart 2 - Mejorando los gráficos estadísticos

El Cambio a JSON

En la versión 1 de OFC, el formato para transferir los datos era el "nativo" de Flash.  Esto implicaba que los datos estaban incluidos &entre ampersands&.  Ante las pocas posibilidades del formato, uno puede esperar cualquier problema derivado de entidades HTML, etiquetas con un simple signo & o cualquier otra cosa.

Con el cambio, los datos se transfieren con una estructura equivalente a la que podría incluir una matriz de datos, para luego ser capturados e interpretados por el archivo SWF en el navegador.

Implantación

Como efecto secundario positivo, es más fácil implantar una solución con esta versión.  Esto incluye el desarrollo de funcionalidades (si no satisfacen las bibliotecas en entorno servidor disponibles en el sitio), su integración, depuración y testeo. Por no hablar del soporte UTF8 de Flash y JSON, algo teóricamente básico pero a veces dramático (es de esperar que PHP6 solucione esto de una vez). Todo esto parece simplificarnos la vida en el desarrollo.

La opción de crear una biblioteca alternativa a las ya existentes puede tener sentido por cuestiones de simplificación.  Por ejemplo, en la versión PHP5 de la biblioteca las funcionalidades se encuentran disgregadas en varias clases y archivos.  Quizá esta estructura tenga sentido en el futuro para albergar gran cantidad de configuraciones, pero actualmente parece excesiva. Por otro lado, las aplicaciones potenciales de la biblioteca en un caso concreto pueden ser muy concretas, con lo que simplificar el código del servidor puede reducir levemente el tiempo de carga (esto se puede notar en sitios con altas tasas de tráfico, no en el resto).

Actualmente casi todos los tipos de gráficos comparten una gran cantidad de las características de configuración, mientras que sólo en algunos casos concretos se utilizan atributos o estructuras de valores diferentes.  Esto dice mucho en favor de la parte cliente (el archivo SWF Flash que se inserta en la página para mostrar el gráfico) de OFC, pero poco en favor de la parte servidor (la biblioteca PHP5 al menos). De todos modos esta crí­tica es muy relativa: creo que se trata de una visión de futuro por parte del creador del proyecto, que se verá en versiones posteriores. Hay que tener algo de paciencia.

Modelo de datos

Para entender las posibilidades que ofrece OFC2, hay que ir un poco más al fondo en la estructura de la configuración de un gráfico.  Resumiendo las caracterí­sticas principales del modelo de datos, se puede diferenciar entre la configuración del gráfico como elemento genérico y la representación de cada serie de datos.  En la primera parte se puede configurar el gráfico a nivel de cabecera, y luego pasar a configurar cada grupo de datos (serie).

Cabecera del gráfico

En el caso de la cabecera podemos encontrar los siguientes elementos de configuración:

• title: Texto y estilo (en formato tipo CSS) del tí­tulo principal del gráfico.
• y_legend: Texto y estilo del eje vertical.  Esto no es aplicable en gráficos como el diagrama de sectores.
• x_axis: Caracterí­sticas de configuración del eje horizontal del gráfico.  Estas caracterí­sticas incluyen el grueso y color del eje, sus etiquetas, y otros detalles.
• y_axis: Prácticamente idéntico al caso de x_axis, salvo en detalles, como definir los valores del límite inferior y superior del gráfico.

Todos estos elementos son opcionales, por lo que se pueden dejar de lado al iniciar los testeos iniciales y entrar a fondo cuando sea cuestión de dejarlo bonito. En los casos de gráficos que no tienen ejes de coordenadas X-Y (como los gráficos de sectores), las configuraciones de coordenadas pueden ser directamente inútiles porque los gráficos no lo necesitan.

Elementos del gráfico

Cada representación gráfica de datos se denomina Element en la biblioteca OFC2, y se encuentra incluido en el apartado "elements" de la configuración.  Para crear un diagrama de barras, de sectores o cualquier otro se define un elemento con su configuración concreta.  Esta configuración debe adaptarse a la configuración de cabecera, básicamente en lo relativo a escala y etiquetas.

Muchos de los atributos de configuración de cada gráfico son comunes, entre los cuales podemos encontrar los siguientes:

• type: Es el que define el tipo de gráfico.  Los tipos disponibles por ahora son: pie, bar, bar_glass, bar_3d, hbar, line, scatter, scatter_line, line_dot, line_hollow, y area_hollow (en este caso es posible crear gráficos de tipo radar).
• alpha: Transparencia del gráfico.  Cuanto menor es el valor, más transparencia.
• colour: Color de la serie de datos, en formato hexadecimal.
• text: Texto de la leyenda que etiqueta la serie.
• font-size: Tamaño de la fuente de las etiquetas de datos (no de la leyenda).
• values: Listado de valores de la serie.  En este campo hay pequeñas variaciones (en algunos casos hay que indicar dos valores), y en el gráfico de sectores hay que indicar el par valor/etiqueta).

Otras configuraciones (en principio específicas) que podemos encontrar son:

• animate: Crea una agradable animación del gráfico para desplegar los datos.  en algunos casos (por ejemplo del gráfico de sectores, "pie") el grafico se inicia plegado y se abre en abanico hasta cerrar el círculo. Puede ser que no funcione en todos los casos.
• stroke: Tamaño de la línea delimitadora del gráfico.
• dot-size: Tamaño del punto en el gráfico de lí­neas con puntos (line_dot), entre otros.

Algunos ejemplos

He generado algunos ejemplos con datos estáticos para mostrar algunos ejemplos.  En el apartado de tutoriales del sitio podéis encontrar muestras de gráficos con enlaces a sus archivos de configuración, con lo que es suficiente para profundizar en el modelo de datos.

 

 

Comentarios

Desde el punto de vista de la implantación, la versión 2 de OFC es mucho más simple, aunque su configuración queda reservada a desarrolladores y no como utilidad (widget) para usuarios finales. Eso es una cuestión a mejorar en cualquiera de estos tipos de bibliotecas, algo que facilitaría su popularización. Me gustarí­a publicar un pequeño asistente de creación de gráficos standalone (introducir la configuración y los datos, y obtener el código para incrustarlo): queda apuntado en la lista de tareas pendientes.

Por otro lado, OFC2 sigue siendo una biblioteca sencilla en cuanto a la variedad de gráficos que se pueden utilizar, aunque han mejorado.  También hay que decir que con esta nueva versión parecen sentarse buenas bases para el desarrollo de una herramienta completa y potente. Por lo tanto, habrá que esperar a nuevas versiones para ver más tipos de gráficos.