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!!!





Graficos de barras y tortas

18 01 2008

Create_a_graph Create a Graph es un muy fácil generador de graficos online… este programa puede ser muy útil para generar graficos rapidamente, sin la necesidad de instalar ningún programa… solamente uno coloca los datos y solo genera el gráfico. Además tiene la posibilidad de guardar el mismo en varios formatos , png, jpg, pdf, emf, eps y svg…

Una vez que se elige el grafico a generar, aparecen 5 paletas laterales bien identificables con las cuales uno puede ir cargando los datos a visualizar e imprimir, una de ellas es la paleta de previsualizacion, y como la palabra lo dice pre-visualiza el grafico generado… una vez conforme con el mismo… puede, desde la paleta Print/Save guardar el grafico en los formatos ya descriptos, imprimirlo online, borrarlo y empezar uno nuevo entre otros…

Create a graph api

Si uno esta buscando una herramienta facil de utilizar para generar graficos estaticos…
esta es en verdad una muy buena opcion.

ACLARACIóN:

Cuando digo estaticos quiero significar que los datos no varian constantemente, por ejemplo “cantidad de usuarios que utilizaron en 2005 firefox” , y el contrapunto Dinamico es exactamente lo contrario … los datos se actualizan solos todo el tiempo “ancho de banda utilizado minuto a minuto…”.

Espero que les sea de utilidad… hasta pronto!

Requerimientos:
Flash player 9
Explorer o Firefox.





5 programas para el estudio

10 01 2008

Aqui les dejo 5 de los mejores programas para estudiar y sacarle jugo al maximo… y los ganadores son:

PhpMailerEste es una libreria de PHP que permite realizar tareas varias al momento de enviar un email. Una de las cosas por lo que se destaca, es la posibilidad de attachar (adjuntar) un archivo. Ademas es muuuuuuy facil de configurar y hay ayudas por toda la web. Download

Five3DEste es unprogramita escrito con AS3 (Action Script 3) el cual te permite crear escenarios en 3d de una manera bastante sencilla, es uno de los mejores programas flash que he encontrado, es para sentarse y tocaaar y tocaaar…

GoogieSpellEs un corrector ortográfico online, uno baja el paquete y lo instala en la web que necesita, y este poderoso programa se conecta con el diccionario de google y automaticamente te corrige los herrores que cometiste… escrito en Ajax.Download

AmChartsEste programa ya lo mensione antes pero vale la pena colocarlo dentro de estos 5 programas para estudiar (y sacarle jugo). Es un paquete que te pocibilita crear graficos excelentes en flash de la manera mas que sencilla, dando un aspecto muuuy profesional a cualquier informe que generes.

OpenCubeEl mas reciente descubrimiento (propio*), es un programa online ( a diferencia de los anteriores este no se implementa a tu web) que te genera automaticamente menues con CSS y Javascripts muy buenos, tiene mil opciones y se pueden hacer muchas cosas, vale la pena ponerse a utilizarlo, además tiene toda la onda de un programa de escritorio pero sin serlo.

Cabe destacar que esto no es lo unico que posteare sobre cada uno, lo mas provable es que realise informes mas detallados de cada uno, si no es que me copo con otras cosas jaja..

Que lo disfruten!!! y despues me cuentan eh?

PD: Cuando digo propio, estoy incluyendo a Francisco… sino se va a enojar…





Gráficos de barra, torta, lineas…

16 12 2007

Navegando por la web, buscando algún programa para graficar datos, entontre esta joya, que no solo es gráficamente agradable, sino que además es altamente configurable!

Este programa esta escrito en ActionScript, y mediante dos archivos XML uno puede ir cambiando practicamente todo…(aún no encotre algo que no lo pueda hacer), lo que facilita muchisimo el trabajo de graficar datos.

AmCharts

Este producto es de uso libre y gratuito, lo unico es que siempre muestra el link del fabricante, si uno quiere removerselo debe comprar la licencia.








Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.