[Google] Haciendo Graficas con la Visualization API

Una vez mas volveremos a tocar las tecnologias de Google, pues estas tecnologias nos traen muchas novedades y muchas simplificacion y desde la perspetiva de Google : las APIs de Google estan para no reiventar la rueda y enfocarnos en resolver otros problemas que requieren mas atencion.

Esta vez haremos uso de la Visualization API, esta API sirve en pocas palabras para hacer graficas con puro javascript gracias a las Google Chart Tools, de la forma mas facil, estas graficas estan muy bien dise~adas y rellenarlas es muy facil.

Ejemplo Grafica PieChart Simple
Ejemplo Grafica PieChart 3d
 

Para no dar rodeos con teoria vamos a empezar, veamos el ejemplo paso a paso e iremos viendo la teoria paso a paso.

La grafica que haremos como ejemplo sera Las visitas de Pharalax, solo abarcaremos 7 dias … y talvez los datos sean ficticios ;), pero solo es un ejemplo.

 

Lo primero que haremos sera cargar en nuestro documento HTML la JSAPI de Gooogle desde https://www.google.com/jsapi , con esta API podremos hacer uso de la Visualization API.

Esta APIS es de javascript,asi que la cargaremos con script.

<script type="text/javascript" src="https://www.google.com/jsapi"> </script>

Ahora empezaremos otro script donde iremos escribiendo las caracteristicas y datos con lo que contara nuestra Grafica, vamos paso a paso :

Ahora cargaremos la Visualization API , una vez cargada (load), podremos empezar :

google.load('visualization', '1.0', {'packages':['corechart']});

Vamos a hacer un callback, para que al momento de que la Visualization API este cargada llamemos a una funcion, esta funcion sera la que implementara la API y dibujara nuestra grafica.

google.setOnLoadCallback(dibujaGrafica);

La funcion en cuestion sera dibujaGrafica, por lo tanto declararemos la funcion y dentro de ella ira el siguiente codigo.

La primera linea dentro de la funcion dibujaGrafica, es la creacion de una Tabla de datos (DataTable), despues apartir de ella construiremos la grafica :

var data = new google.visualization.DataTable();

Agregamos dos columnas a la tabla la sintaxis para agregar columnas es : data.addColumn(tipo, nombre) y como esta sera una PieChart(grafica de pastel, circular)solo necesitamos 2 columnas, la descripcion (en este caso los dias de la semana) y el valor ( el numero de visitas de pharalax en cada dia), el dia de la semana con tipo string y las visitas como number.

data.addColumn('string', 'Dia de la Semana');
data.addColumn('number', 'Visitas');

Vamos a agregar valores(rows) a nuestra DataTable, de la manera siguiente :

data.addRows([
['Lunes', 50],
['Martes', 61],
['Miercoles', 55],
['Jueves', 70],
['Viernes', 42],
['Sabado', 67],
['Domingo', 52]
]);

Podemos ver que entre los corchetes conservamos la estructura que definimos en las columnas ['Dia de la Semana','Visitas'], sino conservamos esta estructura, nuestra grafica jamas se dibujara, y notar que los datos numericos van fuera de comillas.

Vamos a darle las opciones a la grafica , en este caso tendremos 3 caracteristicas : title, width y height ; el titulo , el largo y lo alto de la grafica respectivamente :

var opciones = {'title':'Visitas de Pharalax en una Semana',
'width':800,
'height':600};

Ahora definimos nuestra grafica y le decimos donde se va a dibujar, estamos hablando de una PieChart, en caso de que quisieramos una grafica tipica de barras, simplemente sustituimos PieChart por BarChart , nada mas :

var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

Notamos que la grafica la vamos a dibijar en un componente (en este caso div) con el identificador ‘chart_div‘.

Finalmente dibujamos nuestra grafica, con nuestros datos y nuestras opciones :

chart.draw(data, opciones);

Con esto termina la funcion dibujaGrafica, les dejo el codigo completo :

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

google.load('visualization', '1.0', {'packages':['corechart']});

google.setOnLoadCallback(dibujaGrafica);

function dibujaGrafica() {

var data = new google.visualization.DataTable();

data.addColumn('string', 'Dia de la Semanda');
data.addColumn('number', 'Visitas');
data.addRows([
['Lunes', 50],
['Martes', 61],
['Miercoles', 55],
['Jueves', 70],
['Viernes', 42],
['Sabado', 67],
['Domingo', 52]
]);

var opciones = {'title':'Visitas de Pharalax en una Semana',
'width':800,
'height':600};

var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, opciones);
}
</script>
</head>

<body>
<div id="chart_div"></div>
</body>
</html>

Esto aun no estodo ;) si aun quisieramos ver la grafica en 3d, tendriamos que sustituir los datos que tenemos en opciones por los siguientes :

var opciones = {'legend':'left',
'title':'Visitas de Pharalax en una Semana',
'is3D':true,
'width':800,
'height':600};

y Asi tendremos nuestra grafica en 3d.

Ejemplo Grafica PieChart Simple
Ejemplo Grafica PieChart 3d

Related Posts Plugin for WordPress, Blogger...

Deja un comentario

Loading Facebook Comments ...