Open Flash Chart

  • Por
  • Flash
Una herramienta gratuita para hacer gráficas en Flash. Permite gráficos diversos, como gráficas de barras, de líneas, de tarta, etc.
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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Maria Luisa

01/6/2009
Como puedo cambiar los nombres del eje X
excelente aporte.. los ultimos dias me las he pasado buscando solucion al error del OFC que me estaba volviendo loca.. la tuya es la mejor ayuda q he encontrado.. sin embargo tengo una pequeña duda mas.. como puedo cambiar los nombres del eje X, por ejemplo por meses o fechas, en tu ejemplo toma directamente el numero de datos q se mostrara.. y se puede dar un valor mínimo al eje Y? para valores negativos?
agradeciendo nuevamente tu ayuda, espero ansiosa me respondas.

Franklin

05/6/2009
Conectarlo a una Base de Datos
Como puedo sacar datos de una base MySQL y generar un grafico.

pablo

09/6/2009
hola si me sale este error
This is the URL that I tried to open:../../data-files/x-labels-user-labels-br.txt

Joseph

19/6/2009
Me sale error
Me salen las siguiente lineas de codigo erroneo:

Warning: include_once(php-ofc-library/open_flash_chart_object.php) [function.include-once]: failed to open stream: No such file or directory in /nfs/c01/h02/mnt/35318/domains/www.vinculacionnuevaalianza.org.mx/html/chart.php on line 2

Warning: include_once() [function.include]: Failed opening 'php-ofc-library/open_flash_chart_object.php' for inclusion (include_path='.:/usr/local/php-5.2.6-1/share/pear') in /nfs/c01/h02/mnt/35318/domains/www.vinculacionnuevaalianza.org.mx/html/chart.php on line 2

Fatal error: Call to undefined function open_flash_chart_object() in /nfs/c01/h02/mnt/35318/domains/www.vinculacionnuevaalianza.org.mx/html/chart.php on line 3

Eder

14/9/2009
Tengo un error
No puedo hacer que funcione el ejemplo; tengp un error que se encuentra en el archivo .swf me pide un archivo del data que esta en el archivo pero no me da.
Quiero saber editarlo o simplemente podrian enviar la libreria a ver si la liberria que tengo esta mal diseñada. Este es mi error:

C:UsersJohnDocumentsflashsvndata-filesdata-14.txt

Daniel

01/2/2010
aqui otro ejemplo mas completo
http://armandodiaz.wordpress.com/2008/06/22/graficos-en-tu-pagina-con-open-flash-chart/