Crear gráficos con Google chart y agrupar fechas por meses

Vamos a explicar como obtener una gráfica usando Google Chart y agrupar los datos recogidos por meses, por poner dos ejemplos esto puede servir para obtener las visitas de una página web por meses, o la distancia recorrida por un atleta por cada mes.

Si tenéis alguna duda sobre la creación de gráficos podéis consultar estos dos artículos donde se explica de manera sencilla los pasos a seguir para usar/generar gráficos con Google Chart.

En la siguiente imagen podemos ver que las marcas horizontales son “2,4,6,8,10,12” que se corresponden con los meses que tiene un año (en total 12).

graficos datos dividido meses

Comencemos con el código:

   $select = $link->query("SELECT fecha, distancia FROM cobro");

Una vez obtenidas las filas de la consulta, las recorreremos y modificaremos la columna “fecha”, que tendrá el formato dia/mes/año, lo que vamos a hacer es de la columna fecha capturar el campo mes, por ejemplo si la fecha es 06/10/2015 cogeremos el 10.

Cada número indicará un mes, por ejemplo el 1=enero, 2=febrero…

Existen dos formas de hacer el bucle que genera el gráfico, la primera es que se vayan acumulado los resultados que se almacenan por mes, la segunda es que se haga la media por mes.
Vamos a contemplar dos casos en nuestro ejemplo:
1-el primer ejemplo sería en modo incremental, por ejemplo si quisieramos calcular los kilometros (totales) recorridos por mes nuestro array quedaría de la siguiente manera:
mes  distancia
1    70 (total de distancias recorridas, por ejemplo “10,10,20,15,15”
2    104
3    115
4     80
5    94

2-el segundo ejemplo lo utilizaríamos en el caso de querer realizar la media por mes, como el caso de querer sacar la nota media de estudiantes por mes.
mes    nota media
1      7,5 (total de notas, la formula sería la siguiente: total de notas / número de notas).
2        6,5
3        6
4        7
5        8

Voy a incluir el código de las dos formas planteadas.

1-FORMA INCREMENTAL

Forma incremental (primera opción), en esta opción haremos un sumatorio de los datos almacenados en nuestra base de datos.

Recorremos nuestro array y obtenemos el campo fecha, del campo fecha obtenemos únicamente el mes,
tenemos que tener en cuenta que esto no va a distinguir años ya que solo coge los meses, el año deberemos
seleccionarlo a la hora de hacer la consulta SQL y por lo tanto suponemos que las fechas del array conrresponden al mismo año.

while($row= $select->fetch_object()) 
{
   $fecha = $row['fecha'];
   $dato = explode("-", $fecha);
   $mesSelected = $dato[1];
 
   /*sumamos la distancia correspondiente y lo almacenamos en su posición del array*/
   $mesSelected  = str_replace(0, '', $mesSelected);
   $data[$mesSelected] += $row->distancia;
}
 
/* En este punto ya tenemos el array $datas[] casi completo, 
los indices del 1 al 12 corresponden cada uno con cada mes */
 
/*Ahora lo acabamos de completar rellenado en su primera posición 
"$datas[0]" los nombres de los campos de nuestra gráfica */
 
$datas[0] = array('fecha','distancia');
for ($i=1; $i<13; $i++) 
{
  $var = $data[$i];
  $datas[$i] = array($i, (float)$var); 
}

1-FORMA CALCULAR MEDIA

Parecido al proceso anterior pero con la diferencia de que como vamos a calcular la media necesitamos saber cuantas veces se repite para después poder realizar la división del total de elementos, para ello por cada mes le incluimos un contador.

 
 while($row= $select->fetch_object()) 
 {
   $fecha = $row->fecha;
   $numMes = explode("-", $fecha);
   $mesSelected = $numMes[1];
 
   $mesSelected  = str_replace(0, '', $mesSelected);
 
   $data[$mesSelected] += $row->distancia;
   $v_contAux[$mesSelected]++;
}
 
$datas[0] = array('fecha','distancia');
for ($i=1; $i<13; $i++) 
{
   $var = $data[$i];
   /* recorremos todos los meses, si algún mes está vació le insertamos un 1 
   para que al realizar la división no de error */
   if($v_contAux[$i]==0) 
   {
      $v_contAux[$i] = 1;
   }
 
   $var=$var/$v_contAux[$i]; 
   $datas[$i] = array($i, (float)$var); 
}

En el siguiente código generamos el código HTML y JavaScript para visualizar el gráfico.

 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" > </script>
<!-- Load the AJAX API -->
<script type="text/javascript" src="https://www.google.com/jsapi" > </script>
<script type="text/javascript"
src="https://www.google.com/jsapi?autoload={
'modules':[{
'name':'visualization',
'version':'1',
'packages':['corechart']
}]
}"></script>
 
<script type="text/javascript">
google.setOnLoadCallback(drawChart);
 
function drawChart() {
 
/* cargamos nuestro array generado anteriormente*/
 
var lat = <?php echo json_encode($datas); ?>;
var dataFinal = google.visualization.arrayToDataTable(lat);
 
var options = {
title: 'Gráfico por meses',
curveType: 'function',
legend: { position: 'bottom' }
};
 
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
 
chart.draw(dataFinal, options);
}
 
</script>
</head>
<body>
<div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>
</html>

Iván Martínez

Ingeniero Informático apasionado por el mundo del desarrollo WEB. Me gusta caminar por este mundo lleno de tecnologías y día a día aprender cosas nuevas como el doctor Frankenstein ¡dadme cosas para experimentar!

Deja un comentario

Tu dirección de correo electrónico no será publicada.