unijimpe

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.

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:

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:

[SWF]http://samples.unijimpe.net/charts/charts.swf?library_path=http://samples.unijimpe.net/charts/charts_library&xml_source=http://samples.unijimpe.net/charts/sample_column.xml, 400, 250[/SWF]

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

[SWF]http://samples.unijimpe.net/charts/charts.swf?library_path=http://samples.unijimpe.net/charts/charts_library&xml_source=http://samples.unijimpe.net/charts/sample_3dcolumn.xml, 400, 250[/SWF]

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.

Posts Relacionados

• Gráficos con PHP y Google Charts