Graficos de todo tipo by Google!

25 04 2008

GOOGLE GRAFICOS!

Atención! este es uno de los recursos gratuitos mas interesantes que he encontrado en la web… resulta que Google creo para uso interno una aplicación que genereba graficos de barra, torta, pastel, lineas, etc. donde solo con pasar unos parametros en una url ya te devolvia el grafico generado.

Gracias a las politicas de compartir que tiene Google, ahora lo libero para uso interno y externo… osea que nosotros tambien podemos utlizar esta herramienta!!!

A disfrutarlo y sacarle todo el jugo!
el recurso:http://code.google.com/apis/chart/#radar

Anuncios




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.





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.