Le toca el turno a Open Flash Chart. Una herramienta muy sencilla de utilizar para añadir gráficos a tu web. Es Open Source, así que puedes mirar como esta echo y modificar lo que te apetezca. Puedes descargarte-lo en este enlace.
Open Flash Chart utiliza Flash para mostrar los gráficos y los ficheros de datos utilizan el formato JSON. No te asustes si no habías oído nunca el termino JSON. Por suerte, con el código que te has descargado se incluyen librerías para crear los ficheros de datos con varios lenguajes( PHP, Perl, Python… ).
Para añadir un gráfico lo puedes hacer de varias formas. La que ha mi me parece mas sencilla es:
- Incluye el script swfobject.js en la cabecera HTML de tu código. Para ello:
<script type=”text/javascript” src=”js/swfobject.js”></script>
- Crea un div donde quieras ver el gráfico. En los ejemplos hemos creado:
<div id=”grafico”></div>
- Llama a swfobject.embedSWF para crear el gráfico
<script type=”text/javascript”>
swfobject.embedSWF(“open-flash-chart.swf”, “grafico”, “800″, “500″, “9.0.0″, “expressInstall.swf”,{“data-file”:”data.json”} );
</script>
Hay varias formas de pasar el parámetro de la ruta del fichero de datos. Una de ellas es la que acabo de escribir, en este caso el fichero se llama data.json. Otra forma es pasar el fichero en la URL de la pagina. Por ejemplo, en la URL http://vidaenlaluna.es/ejemplos/open_flash_chart/index.html?ofc=data.php el fichero de datos se llama data.php.
La parte que mas trabajo te va a llevar es la creación del fichero de datos. Hay muchas opciones posibles. En la pagina de Open Flash Chart encontraras muchos ejemplos con el código para crearlos.
Yo he creado cuatro ejemplos en este enlace. Puedes descargarte el codigo comentado con el que se generan los ficheros de datos en este enlace.


#1 by Maki on 8/Jul/2009
- Edito mi comentario -
Oh, no me había fijado bien, qué desilusión, está en Flash, plataforma que odio…
Aunque quedan tan bonitos…
#2 by Maki on 8/Jul/2009
No conocía yo esto, muy interesante.
Gracias, lo usaré en el ranking de mi web (la cual podéis visitar si queréis ya de paso xDDD)