XML/SWF Charts

XML/SWF Charts es una forma sencilla de crear charts (gráficos estadísticos) desde datos ubicados en un XML. El funcionamiento es sencillo, lo primero es crear un XML con los datos a graficar, este XML es leído por un SWF que genera un gráfico de acuerdo a las instrucciones creadas en el XML.

charts.gif

Hay una gran variedad de tipos de gráficos disponibles los cuales abarcan la mayoria de necesidades al momento de hacer gráficos estadísticos. Esta librería es gratuita y muy potente pues si generamos los XML con algún lenguaje de programación podemos gráficos con los resultados de nuestra base de datos.

Utilización
Lo primero es descargar los archivos charts.zip, luego de extraer los archivos copias el archivo charts.swf y la carpeta charts_library al directorio donde esta tu web. Luego ello se debe crear un html e incluir charts.swf, esto lo hacemos utilizando SWFObject de la forma:

<p>XML/SWF Charts</p>
<div id="chart">&nbsp;</div>
<script type="text/javascript">
	var so = new SWFObject("charts.swf?library_path=charts_library&xml_source=sample.xml", "swf", "400", "250", "8", "#666666");
	so.write("chart");
</script>

Hay que notar que al momento de insertar el SWF, se le pasan dos parámetros por URL, library_path y xml_source que indican la ruta de la carpeta de la librería y la ruta del XML con los datos a graficar. En nuestro caso debemos crear un XML llamado sample.xml.

Crear el XML con los datos
Lo siguiente es crear un archivo XML, para que charts.swf lo pueda interpretar, este XML debe tener como nodo principal chart y además dos nodos chart_type y chart_data, entonces la siguiente sintaxis:

[xml]




[/xml]

En el caso de chart_type los tipos disponibles son los siguientes: Line, Column, Stacked column, Floating column, 3D column, Stacked 3D column, Parallel 3D column, Pie, 3D Pie, Bar, Stacked bar, Floating bar, Area, Stacked area, Candlestick, Scatter, Polar, Mixed, Composite, Joined. Luego para nuestro ejemplo escogemos el tipo Column con lo cual tendríamos:

[xml]

Column

[/xml]

Ahora lo siguiente es crear los nodos con los datos, para nuestro ejemplo consideremos que tenemos la siguiente tabla:

charts-data.gif

Luego modificamos nuestro XML de la siguiente forma:

[xml]

Column



2001
2002
2003
2004


Region A
5
10
30
63


Region B
100
20
65
55


Region C
56
21
5
90



[/xml]

Con lo cual obtendríamos el siguiente resultado:

Cargando Flash

Ahora si hacemos una pequeña modificación, cambiamos el tipo de gráfico de Column a 3D Column tendríamos el siguiente resultado.

Cargando Flash

Como pueden ver, solo un XML y podemos generar nuestros gráficos de diferentes formas, todo muy sencillo y rápido. Para finalizar les dejo los archivos fuente de este ejemplo.

Comentarios Total 9 comentarios

Fenix
Publicado: 10/09/2007 5:23 am

Muy interesante realmente, pero quisiera saber como hacer charts como los de Google Analytics que son bastante amenos e innovadores.

renzo_xp
Publicado: 11/09/2007 2:06 am

muy buen dato, gracias por compartirlo :D

Jesus
Publicado: 11/09/2007 2:29 am

¡Muy buen aporte amigos! y de nuevo gracias por compartirlo.

Habria que practicar para desarrollar un chart que nos permita darles animación y hacerlos más amenos como lo dice Fenix.

Carlos
Publicado: 24/09/2007 9:39 pm

Excelente bueno, mil gracias…

osvaldo
Publicado: 12/12/2007 7:28 am

hola buen aporte…..
mi pregunta es como puedo graficar pero una red o sea conexiones entre servidores, applicaciones, modulos.
todo lo que tenga que ver con integraccion y relaciones de maquinas es como modelar una red , y asi pasarla a un diseño grafico mediante un XML…

fernando
Publicado: 02/09/2008 12:36 pm

Te pasaste, excelente, agradecido..

gustavo
Publicado: 12/06/2009 9:09 am

y por las dudas, no para usarlo, se podra sacarle el link que tiene el flash?

jjmoncar
Publicado: 14/10/2009 3:13 pm

buenas tardes.

el codigo como esta aca, no funciona. hay que seguir el ejemplo que dan en el website de la libreria y hacer los cambios necesarios en cuanto al archivo xml y el tipo de grafico que queremos.

saludos

Juan
Publicado: 19/05/2011 1:44 pm

Hola.

He utilizado estos charts en varias ocasiones para hacer estadisticas, pero no me gusta mucho el resultado, queda un poco basto.

¿Alguien sabe de algún otro paquete de gráficos con otro aspecto?

Muchas gracias.

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)