Gráficas Flash para todos

Tras la buena acogida de la cobertura de las Elecciones Generales 2008 decidimos que no nos podíamos quedar ahí. Nos gustó tanto compartir el widget, que pensamos que podríamos ir más allá y brindarte la posibilidad de usar nuestra herramienta de gráficas con tus propios datos.

También liberamos el código fuente, o lo que es lo mismo, ponemos a tu disposición las tripas por si quieres mejorar o ampliar su funcionamiento.

Para meter una de estas gráficas en tu web sólo necesitas dos cosas: un archivo XML que proporcione los datos, y el archivo charts.swf, que es el encargado de pintar la gráfica. ¿Y cómo son estos archivos XML? Lo mejor es verlo con ejemplos.

Ejemplos

A la izquierda tienes el objeto en sí, charts.swf, que es quien pinta el gráfico y carga el archivo XML que puedes ver a la derecha. El texto resaltado es el que debes cambiar por el tuyo.

Gráfica sencilla de barras

Gráfica sencilla de tarta

Desde el XML puedes configurar muchos más aspectos: el tamaño de la letra, la ordenación de los datos, los valores secundarios, los valores inicial y final para ajustar la escala de las barras, etc. Tienes toda la referencia al final de esta página.

Si te has quedado con ganas de ver más, tenemos otros ejemplos con los que podrás experimentar. Bájate el paquete completo de las gráficas, y descomprímelo. Haz doble clic sobre el archivo ejemplos.html para verlos. Para editar un archivo XML puedes utilizar cualquier editor de texto sencillo, como el Bloc de notas que viene con Windows. Haz clic sobre el XML que quieras cambiar con el botón derecho del ratón y elige la opción "Abrir con". Luego elige el Bloc de notas.

En resumen, si quieres meter las gráficas en tu web haz lo siguiente:

1. Bájate el paquete completo de archivos y descomprímelo.
2. Edita uno de los XML de ejemplo con tus datos.
3. Sube charts.swf y chart.xml a tu servidor.
4. Usa el código HTML que ves a continuación, cambiando el texto resaltado por la url de tu servidor.

Por defecto, charts.swf carga el archivo chart.xml, pero puedes especificar otro nombre de archivo usando el parámetro xmlfile. Por ejemplo, charts.swf?xmlfile=mi_archivo.xml.

Y el código fuente, abierto de par en par

También liberamos el código bajo licencia GPLv3 por si necesitas añadir o mejorar algo del funcionamiento de las gráficas.

El paquete contiene los siguientes archivos:

• charts.fla Archivo base. Abrir con Adobe Flash versión MX 2004 o superior.
• chart_xml.as Archivo de código fuente ActionScript 2.0 que contiene lo relativo a la carga y "parseo" del archivo XML.
• chart.as El meollo de todo. En este archivo de código fuente ActionScript 2.0 están todas las funciones que se encargan del dibujado de la gráfica.
• charts.swf El archivo objeto Flash listo para cargar desde un navegador. Compatible desde Flash Player 7.
• ejemplos.html > Archivo HTML con más ejemplos cargados desde varios XMLs.
• Varios archivos XMLs, usados en los ejemplos.

Referencia de parámetros XML

Esquema de parámetros XML en un gráfico de barras:

Esquema de parámetros XML en un gráfico de tarta:

Tienes la posibilidad de especificar un segundo valor que se muestra cuando pasas el ratón por encima de una barra o sector de la tarta. Por ejemplo, en una tarta que representa los escaños asignados a cada partido, puedes añadir el dato del número de votos como valor secundario. A eso se refieren X2 en los esquemas anteriores. Y para definir cuál de los dos valores es el que se representa, y cuál es el que se usa para el tooltip, usa el parámetro active_value en el XML. Echa un vistazo a los ejemplos population.xml y elections.xml para entenderlo mejor.