viernes, 31 de julio de 2009

Crear Reportes Gráficos Con Google Visualization

La semana pasada me tope con un requerimiento particular, este consistia en crear un reporte gráfico(especificamente un pie chart) pero sin usar controles predefinidos en dll y pues digamos que ahora la gente no esta dispuesta a perder mucho tiempo, encontré dos curiosas alternativas dadas por google una es Google Visualization y la otra es Google Chart las dos son buenas sin embargo elegí la primera por que daba mejor vistosidad por su contenido y manejo de eventos. Mientras en Google Charts se consigue generar una imagen estática, en Google Visualization se consigue una animación, por ejemplo se puede dar click en una sección del pie chart y se puede observar el detalle. El resultado fue así, aunque esta es solo es la captura de pantalla del html...
Las lineas que genere son las siguientes:

data.addRows(5);
data.setValue(0, 0, 'Willy');
data.setValue(0, 1, 27);
data.setValue(1, 0, 'Cesar');
data.setValue(1, 1, 10);
data.setValue(2, 0, 'Harold');
data.setValue(2, 1, 5);
data.setValue(3, 0, 'Jorge');
data.setValue(3, 1, 8);
data.setValue(4, 0, 'Marco');
data.setValue(4, 1, 7);

El 5 de la primera linea es el numero de areás que va tener el pie chart, por cada registro se añaden dos lineas por ejemplo para willy se añaden estas dos lineas

data.setValue(0, 0, 'Willy');
data.setValue(0, 1, 27);

siendo la primera el nombre y la segunda el valor recuperado, el porcentaje lo calcula el mismo web service de google no deben preocuparse en generar eso. En este caso el ejemplo es estático sin embargo se pueden generar estas lineas desde cualquier lenguaje como java, php, asp o c sharp.

A continuación dejo el código ejemplo... Saludos
Descargar Ejemplo