Vamos a hablar de un componente Flash muy interesante para la creación de gráficas de representación de datos. Se trata de Open Flash Chart, una herramienta de código libre, gratuita y libre de uso.

Con Open Flash Chart podrás crear gráficas en tu página web con facilidad y sin necesidad de tener Flash instalado en tu ordenador. En las gráficas podrás cargar los datos que desees y elegir entre varios tipos de gráficas, los colores, etc. Una vez publicadas las gráficas en tu sitio web las podrán ver todos los visitantes que tengan instalado el plugin de Flash, lo que es casi la totalidad del tráfico que podrás recibir en tu página.

Es un proyecto muy completo, que no sólo permite crear variados modelos de gráficas, sino que además tiene diversos tipos de usos y tiene librerías para utilizar integrar el sistema de gráficas Flash con la carga de datos en diversos lenguajes de programación web como PHP, .NET, Perl, Java, Python, Rubi y Google WebToolkit.

Podemos encontrar Open Flash Chart en http://teethgrinder.co.uk/open-flash-chart/

En el momento de escribir este artículo está en fase de desarrollo la nueva versión del producto, Open Flash Chart 2, que tiene diversas mejoras, pero principalmente se trata de un cambio en el esquema de desarrollo, que según el autor, es mucho más robusto y permite una mejor organización del código y el crecimiento del proyecto. Podemos encontrar la nueva versión en: http://teethgrinder.co.uk/open-flash-chart-2/

Lo más destacable para los desarrolladores que pretendan utilizar la segunda versión de Open Flash Chart es que la carga de datos se realiza por JSON, una notación especial de Javascript para la definición de objetos.

Para hacer unas pruebas del sistema, aunque la versión segunda del proyecto está en fase Beta, en DesarrolloWeb.com hemos creído que sería mejor ver la segunda versión. Según dice el autor además, la versión 1 ya no se va a seguir actualizando.

Utilizar Open Flash Chart

La creación de gráficas en Flash se puede hacer de una manera bastante rápida, al menos los primeros ejemplos que ofrecen. Para ello será necesario que descarguemos el sistema desde zona de Download de la página de Open Flash Chart. Con ello obtendremos un archivo zip que tenemos que descomprimir en nuestro disco duro.

Dentro veremos una estructura de directorios que tiene muchos códigos y componentes, aunque no cabe asustarse, porque para los ejemplos más sencillos no hace falta utilizar más que un archivo, que es la película Flash (archivo open-flash-chart.swf) que hay en la raíz del paquete comprimido. Esa película o animación Flash es la que tiene el código para generar por Flash la gráfica. Luego la tendremos que configurar con un archivo JSON para indicarle los datos que se desean mostrar.

Para incluir en una página web la película Flash tenemos que utilizar un código como este:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
width="600"
height="300" id="graph-2" align="middle">

<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="open-flash-chart.swf" />
<param name="quality" value="high" />
<embed
src="open-flash-chart.swf"
quality="high"
bgcolor="#FFFFFF"
width="600"
height="300"
name="open-flash-chart"
align="middle"
allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />

</object>

Este código lo he extraído del tutorial 1 de la creación de gráficas Flash que tienen en la propia página del proyecto. Es un código normal para incluir una película Flash en una página web.

Ahora bien, para que esto funcione tienes que tener en cuenta una serie de cosas que veremos a continuación.

1) Tienes que tener la animación Flash (archivo open-flash-chart.swf) en el mismo directorio donde está el archivo con el código HTML anterior. Podrías cambiar el archivo swf al lugar que desees, pero entonces tendrás que actualizar la ruta a este archivo en el código HTML anterior. Fíjate que la ruta al archivo está en dos sitios del código anterior, en una etiqueta PARAM y en un atributo de la etiqueta embed src="open-flash-chart.swf".

2) Tienes que crear el código JSON para la carga de datos de la gráfica y ponerlo en el lugar correcto, con el nombre de archivo "data.json". Según la documentación de Open Flash Chart parece que se busca este archivo de datos en varios lugares ese archivo json, por ejemplo en la raíz del dominio, pero según las pruebas que he hecho en desarrolloweb .com, no me ha funcionado así. Luego veremos un ejemplo de este código y una manera de localizarlo para que funcione el ejemplo, si es que no queremos colocarlo en la raíz del dominio.

3) Importante: el ejemplo tampoco se visualizará correctamente si no colocas los archivos en un servidor web. Es decir, tienes que publicarlos en tu espacio de alojamiento que tengas en Internet y no en tu ordenador local. O si tienes un servidor web configurado en tu ordenador, debes colocarlo en algún directorio de publicación y acceder al ejemplo pasando el servidor web. Esto es porque el Flash adquiere por http el archivo JSON, por medio de Ajax, lo que sólo funciona si estás en un servidor web y accedes a la página a través de http.

Archivo JSON de carga de datos de la gráfica Flash

El archivo JSON lo debemos crear para indicarle a la película Flash cuáles son los datos que se tienen que mostrar. Este archivo se escribe con una sintaxis especial, en lenguaje Javascript. No te asustes porque la sintaxis es sencilla de leer, entender, editar según tus necesidades, ya que JSON es una notación entendible por las personas.

De todos modos, el propio Open Flash Chart tiene una serie de librerías en distintos lenguajes, como había comentado antes en este artículo de DesarrolloWeb.com, para generar juegos de datos en sintaxis JSON, por lo que no tendrías por qué conocer nada sobre JSON para utilizar este componente.

Un archivo JSON que podemos utilizar de ejemplo tiene esta forma:

{
"title":{
"text": "Gráfica de prueba - DesarrolloWeb.com",
"style": "{font-size: 20px; color:#999900; text-align: center;}"
},

"y_legend":{
"text": "Gráfica creada con Open Flash Chart",
"style": "{color: #99cc33; font-size: 12px;}"
},

"elements":[
{
"type": "line",
"alpha": 0.5,
"colour": "#0000cc",
"text": "Páginas vistas",
"values" : [14,12,14,9,10,12,15,12,13]
},
{
"type": "line",
"alpha": 0.5,
"colour": "#660033",
"text": "Paginas vistas 2",
"values" : [9,7,8,10,12,14,13,10,11]
}
],

"x_axis":{
"stroke":2,
"colour":"#d000d0",
"grid_colour":"#00ff00"
},

"y_axis":{
"stroke": 4,
"tick_length": 3,
"colour": "#9933ff",
"grid_colour": "#0000ff",
"offset": 0,
"max": 20
}
} Lo he sacado del tutorial que ofrecen en la página del producto y sólo he adaptado unas pocas cosas para personalizarlo y de paso conocer algunas de las funcionalidades de este módulo.

Ahora sólo tendríamos que indicar el lugar donde está el archivo con los datos. Para ello la forma más sencilla es a través de la URL.

Coloca simplemente el archivo JSON en el mismo directorio que has colocado tanto la página web con el código HTML para invocar al Flash, como la propia película, con el nombre "data.json". Así pues tendrás en ese directorio 3 archivos.

• El archivo HTML con el código para incluir la película Flash
• El archivo de la animación Flash: open-flash-chart.swf
• El archivo con los datos JSON: data.json

Ahora accede a esa página indicando en la URL el nombre del archivo JSON:

http://www.tudominio.com/ruta_de_tu_archivo_html.html?ofc=data.json

Hemos colocado el ejemplo en DesarrolloWeb.com para que puedas verlo.