Open Flash Chart: Gráficos Estadí­sticos Open Source

Era de esperar que fuera Google quien abriera la veda: Google Analytics, siguiendo en parte la estela de Gmail, había dado otra vuelta de tuerca a la gestión de estadísticas de la web.

Después de la compra de Urchin y de la posterior adaptación a la imagen del resto de servicios del buscador ofrecieron un servicio que muchos (yo me incluyo) utilizan para disponer de información sobre la actividad en su sitio.

En uno de los aspectos que Google Analytics provocó un salto fueron los gráficos en formato Flash: todo un salto en cuanto a interactividad e imagen de profesionalidad.

Para buscar efectos parecidos me acerqué al formato SVG, pero no es lo mismo: aunque por un lado el gráfico se cargaba con gran agilidad (todo el proceso se realizaba en el lado de cliente y lo único transmitido desde el servidor eran los vectores del gráfico), la interactividad y las posibilidades gráficas dejaban mucho que desear.

No soy un enamorado del Flash: lo cierto es que pocas veces lo voy a utilizar, salvo que sea necesario. Para empezar me gusta lo sencillo, y para acabar estoy lo suficientemente comprometido con temas de accesibilidad y posicionamiento en buscadores como para no hacer el loco con la tecnología de Adobe. Sin embargo, los gráficos estadísticos son lo que son, y como excepción al resto de contenido, puede presuponerse que difícilmente son retransmitibles en forma verbal.

Es por ello que he encontrado un gran aliado en la biblioteca Open Flash Chart...

Concepto base de Open Flash Chart

La idea que permite el uso de Open Flash Chart (OFC) es el desarrollo por separado de código Flash, que es el que después de compilarse genera un archivo SWF que se embebe en la página. En el código de embebido se indica un parámetro que indica la URL desde la que la biblioteca puede configurarse para generar el gráfico. Al solicitar e interpretar los parámetros, se genera el gráfico y lo muestra en la posición de embebido.

Los parámetros son generados por un Helper, que puede encontrarse para varios lenguajes en el sitio de descarga de la biblioteca. Entre ellos podemos encontrar Java, Python, PHP y RoR. Este helper genera el código necesario en formato de texto llano para que el archivo Flash pueda interpretar los datos y mostrarlos.

Transferencia de Parámetros entre Flash y HTML

Siempre se está a tiempo de realizar chapuzas. Para mí, la forma nativa de Flash para recibir parámetros desde HTML es una clara muestra de chapuza. Por suerte ya existen clases como unserializer que transfiere datos serializados, o incluso otras aproximaciones más sofisticadas al problema como AMFPHP, que se basa en un protocolo binario para transferir datos.

Para quien no se haya encontrado aún con el problema, El formato que utiliza Flash para recibir parámetros desde HTML tiene la forma siguiente:

&parametro1=valor& &parametro2=valor2&

Es decir: ampersand, parámetro, signo igual, valor del parámetro, ampersand. En formato UTF-8... Y con sacarina, por favor.

Vale que en los inicios de Flash esto podía ser una solución, pero a estas alturas es un poco triste. Ya digo, si vas a desarrollar una biblioteca en Flash, piensa en serializer, AMFPHP o algo parecido.

Parámetros de los gráficos de OFC

A partir de una galería relativamente reducida de gráficos, y sacando provecho de los efectos visuales que permite Flash, OFC permite mostrar una cantidad más que aceptable de efectos que pueden satisfacer gustos muy exigentes.

La contrapartida es la variedad de parámetros a utilizar para configurar cada gráfico. No sólo es que hay varios parámetros, sino que en algunos casos dos parámetros iguales tienen diferente nombre en dos tipos de gráficos. Aunque eso puede uno ahorrárselo en parte, utilizando el helper disponible para descarga, mi intención era integrar esta biblioteca en un framework, con lo que fue necesario buscar una estrategia más sostenible a largo plazo.

Para ello analicé los parámetros necesarios en OFC para los tipos de gráficos principales, y busqué la forma más general de generar esos parámetros sin tener que dar muchas vueltas para cada nuevo tipo de gráfico. El sitio "oficial" de OFC es tan extenso en demostraciones como escueto en especificaciones, así que tocó realizar una labor de investigación. La tarea se centró en comprobar los datos generados en las demos, básicamente los archivos gallery-data-X.php que se enlaza en cada demo.

Fue relativamente rápido identificar los parámetros aplicables en todos los gráficos, y un poco más laborioso identificar los parámetros de cada gráfico. No he llegado a recopilar todos los parámetros, aunque con los que tengo ya me vale para jugar una temporadita...

Para resumir un poco:

• Parámetros comunes:
• title: Título del gráfico.
• values: Listado de valores que generan el gráfico. Un "values" por serie de valores.
• x_legend / y_legend: Título del eje horizontal / vertical
• x_labels: Etiquetas del eje horizontal. Debe coincidir con el número de ítems en values.
• x_axis_steps / y_axis_steps.
• x_grid_colour / y_grid_colour: Color de la rejilla horizontal / vertical.
• y_min / y_max: Valor mínimo / máximo del eje vertical (Y)
  

Con los parámetros anteriores ya se puede configurar gran parte las características de los gráficos. Tales parámetros no son siempre obligatorios. Para concretar cada tipo de gráfico, hay que poner algunos parámetros adicionales.

• Gráfico de frecuencias (líneas):
• line_N: Indica que la serie "N" (no se pone si es la primera serie) se mostrará con una línea normal, sin marcadores en los puntos de los datos.
• line_dot_N: La serie mostrará puntos rellenos en los puntos de los datos.
• line_hollow_N: LA serie mostrará puntos vacíos.
• Gráfico de barras:
• bar_N: La serie muestra barras sin bordeado.
• filled_bar_N: Barra con borde y color de relleno.
• bar_3d_N: Configuración de la serie con barras en 3D.
• bar_glass_N: Configuración de la serie para una serie con barras "de vidrio".
• bar_fade_N: Configuración de la serie para una barra con degradado.
• Gráfico de área:
• area: Área sin puntos en los valores.
• area_hollow: Área con puntos vacíos en los valores.
• Gráfico de sectores (pastel):
• pie.
  

El sufijo "_N" que muestran los parámetros sirven para indicar el número de gráfico. No sólo forman parte de la lista de parámetros en sí, sino que sirven para identificar las series.

Esto es una muestra bastante corta de lo que OFC puede hacer por ti. Dado que lo voy a empezar a utilizar en breve, con que mires la llamada que se realiza desde el tag embed del HTML, ya podrás ver detalles. En cualquier caso, el sitio web de la biblioteca muestra ejemplos completos al respecto.

La biblioteca tiene licencia GPL para el código Flash y LGPL para el código PHP. Sin embargo, montar un generador de los parámetros no es mucho más complejo que verificar los parámetros existentes. Vaya, que es cuestión de tiempo.

Es probable que dentro de poco aparezca algún grafiquito por aquí, por ejemplo para lo relativo a la ley d'Hondt, que diría que está al caer.