A blog about data, information and IT, by Mario Alberich

Aug 28
2007

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


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.

Tags

gestión documental 10     Recuperación información 11     Linux 7     Usabilidad 5     open source 3     Tagging 12     lógica borrosa 2     fuentes de información 12     Google 6     off-topic 6     spam 2     grafos 6     Web social 11     modelización 12     Productividad 11     buscadores 2     utilidades 17     Profesionales 9     SEO 5     estándares 3     veracidad 3     relevancia 2     lingüística 2     PLN 2     lenguajes documentales 2     apis-mashups 3     reseñas 7     Flash 7     Gráficos estadísticos 13     Publicidad 3     Innovación 5     muestreo estadístico 9     PHP 14     internet 2     testeo 12     desarrollo 3     visualizacion 36     javascript 16     datos abiertos 9     elecciones 2     simulación 5     html5 7     phing 9     ssh 2     seguridad 3     indicadores 2     demografía 3     media 2     algoritmos 7     shell 4     mysql 2     backup 2     big data 6     twitter 2     d3js 11     revealjs 2     metodología 6     data-journalism 6     smartcities 2     NYT 2     privacidad 3     benchmarking 4     recopilaciones 21     magento 5     formacion 2     github 2     HHVM 3     psicología 2     angularjs 3     grep 2     nodejs 5     promises 2     mapreduce 3     crossfilter 2     exploración de datos 2     machine learning 2    

© 2007 and beyond Mario Alberich, licensed under CC-BY-SA unless stated otherwise.