Como crear gráficos con MYSQL, AJAX y Google Chart

Vamos a explicar cómo crear gráficos con la galería que nos ofrece Google.

El tipo de gráfica que hemos escogido para el artículo es Line Chart.

En este artículo el proceso de carga de datos y envío del array con dichos datos se hará a través de AJAX. Otra manera para realizar este proceso es usando solo un único archivo y prescindir en la medida de los posible del uso de AJAX.

Para ver otra alternativa para generar el mismo gráfico aquí.

La gráfica que vamos a generar por una parte será dinámica y por otra estática:

  • Cuando digo dinámica quiero decir que la gráfica va a variar dependiendo de los datos almacenados en nuestra tabla (dentro de nuestra base de datos).
  • Cuando digo estática quiero decir que siempre se ejecutará la misma consulta SQL sobre las mismas columnas de la tabla, en otras palabras la gráfica siempre trabajará con las mismas métricas (por lo menos en este artículo).

Para generar la gráfica vamos a utilizar los siguientes recursos:
HTML, AJAX, JAVASCRIPT, MYSQL, PHP

Así será el resultado final de nuestro gráfico:

linechart grafico

Vamos a trabajar sobre dos archivos.

Primer archivo:
Su nombre será: cargaDatos.php
Este archivo será el encargado de conectarse a la base de datos y cargar los datos necesarios para nutrir a la gráfica.

<?php
//accedemos al servidor
$conexion = mysql_connect('localhost', 'usuarios', 'password')
or die('No se pudo conectar: ' . mysql_error());
/*seleccionamos la tabla que contenga la información que queremos que se visualice en la gráfica */
mysql_select_db('chart') or die('No se pudo seleccionar la base de datos');
//una vez conectados realizamos la consulta
$SQLDatos = "SELECT * FROM datos";
 
//ejecutamos la consulta
$result = mysql_query($SQLDatos);
//obtenemos el número de filas que ha generado la consulta
$numFilas = mysql_num_rows($result);
 
/* a continuación crearemos un array donde cargaremos todos los datos 
que deseemos mostrar en la gráfica */
/* la primera posición del array la reservamos a los nombres de las métricas, 
en nuestro caso serán dos métricas: Distancia y fecha */
$datos[0] = array('distancia','fecha');
 
/*creamos un bucle que recorrerá todas las filas generadas en nuestra consulta,
 y por cada fila se almacenará en una posición de nuestro array.*/
for ($i=1; $i<($numFilas+1); $i++)
{
    $datos[$i] = array(mysql_result($result, $i-1, "fecha"),
    (int) mysql_result($result, $i-1, "distancia"));
}
 
/* una vez tengamos el array $datos listo, utilizamos la instrucción json_encode 
que será llamada desde nuestro segundo archivo */
echo json_encode($datos);
mysql_close($conexion);
?>

Segundo archivo:
Su nombre será: index.php
En este archivo se pintará el gráfico.

Será necesario cargar la libería de AJAX.

 
 <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(dibujaGrafica);
 
      function dibujaGrafica() {
 
		var data = $.ajax({
		url: "cargaDatos.php",
		dataType:"json",
		async: false
		}).responseText;
 
		var obj = JSON.parse(data);
 
		var datosFinal = google.visualization.arrayToDataTable(obj);
 
        var options = {
          title: 'Gráfica de ejemplo',
          curveType: 'function',
          legend: { position: 'bottom' }
        };
 
        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
 
        chart.draw(datosFinal, 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!

5 comentarios sobre “Como crear gráficos con MYSQL, AJAX y Google Chart

  • el Ago 8, 2017 a las 8:30 pm
    Permalink

    Hola,

    estoy intentado adaptar tu código a una tabla que tengo con los campos id, fecha, articulo y precios, para la gráfica solo me interesa la fecha y el precio ya que en le select ya escojo el articulo
    la parte de cargaDatos.php parece que carga bien, al menos me saca los valores de la base de datos
    [[“date”,”precio”],[“2017-07-24”,3],[“2017-07-25”,3],[“2017-07-26”,3]…….

    del archivo index.php entiendo que no debo tocar nada pero al cargarlo en el navegador solo me saca la linea comentada “//También será necesario cargar el javascript que hará que se vea la gráfica”

    he mirado el el archivo log de apache error.log y no sale nada, en el php_error.log tampoco
    el código imagino que lo has probado y funciona.

    sabes que puedo estar haciendo mal?

    Muchas gracias

    Respuesta
    • el Ago 9, 2017 a las 12:27 pm
      Permalink

      Hola, disculpa pero la línea que te sale es un comentario explicativo, puedes quitar esa línea si quieres, de todas maneras ya está corregido y ahora saldrá correctamente como un comentario. Saludos.

      Respuesta
  • el Ago 8, 2017 a las 8:38 pm
    Permalink

    por cierto, la estructura de la tabla es esta

    +———+————–+——+—–+———+—————-+
    | Field | Type | Null | Key | Default | Extra |
    +———+————–+——+—–+———+—————-+
    | id | int(11) | NO | PRI | NULL | auto_increment |
    | date | date | YES | | NULL | |
    | article | varchar(50) | YES | | NULL | |
    | preu | decimal(4,2) | YES | | NULL | |
    +———+————–+——+—–+———+—————-+

    Respuesta
  • el May 1, 2018 a las 1:28 am
    Permalink

    Buena tarde.
    Veo que en el codigo tienes dos cierres de html y body, ¿Eso es correcto?
    Por otra parte hasta donde se las url de los NPM se deben colocar en dentro del head.

    ¡Saludos!

    Respuesta
    • el May 24, 2018 a las 1:30 pm
      Permalink

      Hola, antes de nada muchas gracias por poner tu comentario, lo voy a mirar y corregirlo. Saludos.

      Respuesta

Deja un comentario

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