Google Charts y Windows Azure 1 - Introducción a Google Charts

En el proceso de desarrollo de aplicaciones, los que nos dedicamos a esto pasamos constantemente por proyectos o escenarios donde debemos seleccionar cual es la tecnología que mejor aplica para el problema que queremos desarrollar. En un proyecto en donde me tocó trabajar recientemente, tuve que integrar Azure con Google Charts y luego de la experiencia - muy positiva por cierto - decidí crear una serie de post para mostrar cómo interactuar con los componentes de creación de gráficos de Google. Para iniciar, primero voy a hacer un post relacionado con el tema de Google Charts, después de lo cual voy a crear otros posts para integrarlos con componentes de Windows Azure.  

Qué es Google Charts?

Google Charts es un conjunto de módulos escritos en Javascript que nos permiten graficar de forma sencilla y rápida → y con un excelente desempeño. La librería soporta más de 20 tipos de gráficos y crece día con día. El link donde se encuentra toda la información de esta librería se puede localizar acá.

La librería es muy sencilla de usar solamente hay que manera los conceptos típicos de cualquier suite para creación de gráficos y entender muy bien como se usan las fuentes de datos. Básicamente existen tres componentes que interactúan para que los gráficos se puedan presentar en una página Web. En primer lugar la fuente de datos, seguidamente procedemos con la carga de los datos a una clase js DataTable, desde la cual pintamos los datos en los diferentes charts que vamos a presentar en nuestra página.  La siguiente figura nos resume cómo interactúan estos componentes.

Demostración

Para iniciar vamos a crear un ejemplo muy simple utilizando solamente una pagina web y la librería de charts de google, todo programado en javascript. Como lo hemos hecho en los ejemplos donde usamos javascript, vamos a usar el IDE llamado cloud9 para programar el demo. El primer paso es incluir la librería donde esta contenido el acceso al GoogleChart, este paso se ve en la siguiente figura.

Ahora, procedemos a crear el código necesario para poder desplegar el gráfico en nuestra página web.

Como vemos en el código anterior, primero creamos el conjunto de datos que queremos desplegar en el chart. En este caso estamos creando un DataTable estático pero en próximos post lo vamos a integrar a componentes de Windows Azure. El paso dos es mas bien estético, como queremos que se vea el Chart; en este caso vamos a poner un fondo Gris, un título con fuente 18, con tooltip cuando movemos el cursor por el chart, y lo queremos ver en 3D. Por último creamos el gráfico → un pieChart →  y lo pintamos ( en un div llamado ‘chart’).

La siguiente función que debemos crear es la que carga los componentes de la librería para que se puedan utilizar en el código anterior. Es importante destacar que aquí es donde se asocia nuestra función drawChart con el chart que vamos a crear.

Por último creamos el div en la página HTML donde se va a pintar el chart. Nótese que el nombre del div es el del elemento que se obtiene a la hora de instanciar el chart que vamos a apuntar.

Ahora solo nos queda ejecutar la página Web. El resultado de dicha ejecución se puede ver en la siguiente figura.

En nuestro próximo post, vamos a usar componentes de Windows Azure para obtener los datos de forma dinámica y para poder graficarlos con Google Charts.

 

Etiquetas de Technorati: Google Charts,JavaScript,Windows Azure