Como generar graficos con Amchats Parte I

19 01 2008

Este será mi primer tutorial sobre este fantástico programa…
Basta de chacharas y vamos a la accción:

Lo primero que haremos es dirigirnos a la pagina oficial de Amcharts y elegir uno de los tantos graficos a generar… yo voy a utilizar los graficos de barras porque ya los utilize anteriormente.
Una vez aquí… buscaremos en la barra lateral la opcion de descargar (download) los ultimos ficheros para empezar a trabajar…

Una vez descargado el .zip lo descomprimimos y encontraremos 2 carpetas, un archivo de texto con la licencia y un archivo .html, el mismo contiene un ejemplo del archivo bajado.

carpetas

Dentro de “examples” encontraremos muchisimos ejemplos de graficos ya creados… los cuales nos serviran luego para ir probando los resultados….

Hasta ahora todo normal… nada que todos ya hayamos hecho… bien… ahora vamos al corazón del asunto.

COMO FUNCIONA AMCHARTS ???

A lo mejor debería aver empezado por aqui… disculpen es por mi falta de practica jejeje… Amchats esta constituido por 4 pilares fundamentales …. HTML, XML, JAVSCRIPT y ACTIONSCRIPT… como ven es un programa multi-lenguaje (lenguajes de programacion)…un hibrido… esto trae ventajas y desventajas pero es asunto de otro post… pero para lo que lo necesitamos no hace falta saber muuuucho… con un poco de paciencia y curiocidad es mas que suficiente….

Vamos al codigo…

Como veremos a continuacion, todo lo que se necesita es este codigo javascript insertado entre las etiquetas <body></body> en principio esto es todo… (para que funcione en nuestra web…)

sin-titulo-20.jpg

Figura1


Nota importante:
Estoy tomando por centado que la estructura de carpetas es correcta, es decir… si yo quiero colocar mi grafico en el index.html este debe estar al mismo nivel que el archivo amcolumn.html para que todos los links no se rompan… de todas formas es muy simple modificar esto ultimo.

Bueno como veran en la Figura1 muestro el codigo javascript insertado en el html… bien en la primer linea grisada empesando de arriba hacia abajo podemos leer el siguiente codigo:

<script type="text/javascript" src="amcolumn/swfobject.js"></script>

Esto nos indica de donde tomar el archivo Javascript principal, sin esto no funciona nada…

Luego encontramos:

<div id="flashcontent">
<strong>You need to upgrade your Flash Player</strong>
</div>

Este es el DIV donde se cargará el grafico. No se puede reemplazar por otra cosa…OJO.
Fijemonos que esta etiqueta tambien tiene un ID con un nombre… ese nombre es responsable de indicarle a javascript donde colocar el grafico… dicho de otro modo… javascript dice “debo colocar este grafico en la etiqueta DIV con el ID igual a flashcontent”… puede cambiarse el nobre con total confianza siempre y cuando luego al final del codigo en
so.write("flashcontent");

le coloquemos el nuevo nombre que hemos elejido…

La siguiente linea identifica cual es el .SWF que cargaremos y donde se encuentra… ademas tenemos 4 paremetros ajustables… 520 es el ancho, 400 el alto, 8 la version del flash player, #FFFFFF el color de fondo.
var so = new SWFObject("amcolumn/amcolumn.swf", "amcolumn", "520", "400", "8","#FFFFFF");

Aqui donde esta alojado el .SWF:

so.addVariable("path", "amcolumn/");

desde aqui se toma el xml con las configuraciones:

so.addVariable("settings_file", escape("amcolumn/amcolumn_settings.xml"));

la linea siguiente toma los datos a ser mostrados en el grafico:

so.addVariable("data_file", escape("amcolumn/amcolumn_data.xml"));

Se pueden pasar los datos de gráficos como una cadena directamente de este archivo
so.addVariable("chart_data", "");

Se pueden pasar configuraciones del grafico como una cadena directamente de este archivo.
o.addVariable("chart_settings", "");

Le añade algunos ajustes a la tabla de los gráficos cargados
so.addVariable("additional_chart_settings", "");

Es el texto que aparecera cuando empieza a cargar las configuraciones… esto solo si esta habilitado. Recuerden que una linea con una doble barra inclinada ” // ” en javascript, como en varios lenguajes, significa que esta comentado… es decir… el interpete se lo saltea, basta con borrar esas barritas y ya tenes habilitada la opcion.
so.addVariable("loading_settings", "LOADING SETTINGS");

Lo mismo que antes… texto que aparece cuando se empieza a cargar los datos.
so.addVariable("loading_data", "LOADING DATA");

El color del precargador…
so.addVariable("preloader_color", "#999999");

esta ultima linea indica donde debe “escribir” o insertar el resultado. Como ya dije antes debe tener el mismo nobre que el DIV antes mencionado.
so.write("flashcontent");

y por fin el final…

</script>

Con este primer e informe podemos empezar a entender el funcionamiento de este fantastico programa… ahora en la parte II voy a explicar el archivo data.xml que es el que almacena todos los datos a ser configurados….

Como este es mi primer Tutorial me encantaria que me dejen un FeedBack… un comentario sobre si les gusto… si fui lo suficientemente claro al momento de explicar… que se puede mejorar y demas…. muchas gracias!!!

Anuncios

Acciones

Information

4 responses

17 07 2008
FRANCISCO

quiero hacer graficos profesionales

17 07 2008
elmanusito

Pues adelante!… descarga el programa e intenta hacer algo sencillo al principio… una vez que sepas como manejar el programa… intenta mejorarlo… en menos de lo que piensas ya podras hacer graficos profesionales. Mucha suerte!

17 03 2010
Say

Hola!!! tengo una pregunta estoy trabajando en adobe flex y necesito crear un chart radar pero apartir de los valores que el usuario de en Textarea… ya hice uno pero con valores fijos y agregando amCharts…
por favor cualquier comentario te será agradecido en gran manera

27 06 2013
Luis

hola muy buen post estoy por trabajar con esta libreria quisiera mas ayuda ya que yo no lo pienso hacer en una pagina web sino con php y base de datos es decir dinamicamente!! ojala hagas un post de este tema salu2 dsd mexico.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s




A %d blogueros les gusta esto: