Esta es la continuación del tutorial de la semana pasada, como lo prometido es deuda, se va a explicar la vista y como queda el resultado final.
Vista
La vista es la encargada de la parte visual, es decir, todo lo que verá el usuario debería ir en ella, por tanto aquí es donde situamos el gráfico de Analytics. Es necesario referenciar la librería de jQuery porque se va a usar una de sus funciones , para ello basta con añadir esta linea dentro del encabezado (entre las etiquetas <head></head>).
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
Una vez más he aprovechado la vista predefinida ya que es perfectamente válida, su nombre es welcome_message.php. En el encabezado, además de la librería anterior, también se incluye el código JavaScript necesario para el gráfico de Analytics. Lo primero que hay que hacer es indicar donde está situada la librería de dicho gráfico, así que se referencia directamente a la URL, tenemos la opción de bajarla y ponerla en nuestro propio servidor, pero en mi opinión es mas engorroso tener que actualizarla manualmente si queremos aprovechar nuevas funcionalidades que vayan añadiendo.
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
Después se indica el componente a cargar, existen muchos controles disponibles, en este caso yo me he decantado por el gráfico de áreas que me parece muy útil para representar las visitas de los usuarios, por lo que hace falta cargar el paquete Corechart.
google.load('visualization', '1', {packages: ['corechart']});
Una vez cargada la página (incluyendo la API de google) indicamos con esta línea que llame a la función que rellena y muestra el gráfico.
google.setOnLoadCallback(drawVisualization);
Esto es lo que contiene dicha función.
function drawVisualization() {
$.post( "/RepresentacionAnalytics/index.php/welcome/showAppStats", {numDiaPasado: 9}
,function(data){
var dataG = google.visualization.arrayToDataTable(data.visitas);
var ac = new google.visualization.AreaChart(document.getElementById('containerAppVisits'));
var options = {
title : "Visitas los 9 dias anteriores",
hAxis: {title: 'dias'},
vAxis: {title: 'visitas'},
height : 400
};
ac.draw(dataG,options);
},"json");
}
Como se puede ver utiliza la función post de jQuery, la cual nos permite obtener los datos necesarios del servidor y rellenar con ellos el gráfico si tiene éxito. El primer argumento apunta a la ruta a la que hacer la petición, el encargado de obtener los datos es la función ShowStats incluida dentro del controlador Welcome como se explicaba en la primera parte de este tutorial. En el segundo argumento se indica cuantos dias se pretenden mostrar, podría haber escogido cualquier otro número natural.
El último argumento es la función que se ejecutará en caso de que la petición haya funcionado correctamente, recordemos que los datos devueltos por el servidor están en la variable data. Para rellenar los gráficos los datos deben estar en formato DataTable, por lo que se transforman a dicho formato con la función que proporciona la librería de Google. En la siguiente linea se indica el tipo de gráfico y donde se dibujará, basta un simple div con identidad (para poder recuperarlo dentro del script) en el cuerpo de la página.
<body>
<div>
<div id="containerAppVisits"></div>
</div>
<body>
Por último llamamos a la función draw del objeto que acabamos de crear, el cual pinta el gráfico donde se ha indicado, pasandole el DataTable anterior y las opciones que queramos, yo he escogido las que me parecen básicas (título, nombre del eje de ordenadas, nombre del eje de abscisas y tamaño). El resultado final está a continuación (derivados de una BBDD propia), gracias a las herramientas para desarrolladores de Chrome es posible ver el JSON recibido del servidor.
Conclusiones
En este tutorial hemos visto cómo visualizar datos contenidos en una BBDD usando uno de los múltiples gráficos disponibles en Analytics. Se ha implementado una solución muy básica que tiene mucho margen de mejora, por ejemplo que el usuario pueda elegir el intervalo, el gráfico que prefiere, mostrar más de un tipo de dato a la vez, etc.
Espero que te haya servido para aprender algo nuevo estimado lector, en caso de que sólo hayas leído este post en busca de material para el postureo no tienes más que utilizar alguna de estas webs y quedaras como un señor delante del jefe sin molestarte en leer todo lo anterior (aunque si tu jefe ha leído por casualidad la entrada previa sobre Codility y Project Euler lo llevas claro).
La primera de ellas te convierte en un programador con un nivel asombrosamente parecido al de este chico (ojo al segundo 17).
Si el MECD ha considerado que representa el mejor ejemplo de alguien que ha finalizado ese plan de estudios por algo será.
La segunda te convierte en un hacker como los que te puedes encontrar en las pelis de Wargames, Matrix o Los becarios.
Cualquier duda la podéis postear en los comentarios. See you.
Bonus4Code 