Generar gráficos con MYSQL, PHP y Google Chart

En el anterior artículo vimos un ejemplo de como generar un gráfico utilizando AJAX, en esta ocasión prescindiremos de AJAX (en medida de lo posible).

Para ver el anterior capítulo pulsar aquí

El resultado del gráfico será el mismo que el artículo anterior (Line Chart), sin embargo el proceso va a ser diferente.

Resultado final:

linechart grafico

Esta vez trabajaremos sobre un único archivo, por ejemplo lo llamaremos index.php.

Parte 1: En esta parte se realizará la consulta a la base de datos y se cargará un array con el resultado de la consulta.

 
<?php
// Conectamos base de datos
$conexion = mysql_connect('localhost', 'usuario', 'password')
or die('No se pudo conectar: ' . mysql_error());
mysql_select_db('chart') or die('No se pudo seleccionar la base de datos');
 
//preparamos la consulta
$SQLDatos = "SELECT * FROM datos";
 
//ejecutamos la consulta
$result = mysql_query($SQLDatos);
//obtenemos número filas
$numFilas = mysql_num_rows($result);
 
//cargamos array con los nombres de las métricas a visualizar
$datos[0] = array('distancia','fecha');
 
//recorremos filas
for ($i=1; $i<($numFilas+1); $i++)
{
    $datos[$i] = array(mysql_result($result, $i-1, "fecha"),
    (int) mysql_result($result, $i-1, "distancia"));
}
 
mysql_close($conexion);
?>

Parte 2: Le pasaremos el array cargado en el paso 1 y a partir de los datos pasados pintaremos 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 $datos creado en PHP para que se puede utilizar en JavaScript
var cargaDatos = <?php echo json_encode($datos); ?>;
 
var datosFinales = google.visualization.arrayToDataTable(cargaDatos);
 
var options = {
title: 'Ejemplo gráfica',
curveType: 'function',
legend: { position: 'bottom' }
};
 
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
 
chart.draw(datosFinales, 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!

3 comentarios sobre “Generar gráficos con MYSQL, PHP y Google Chart

  • el Dic 9, 2016 a las 4:21 pm
    Permalink

    Excelente post. Muchas gracias, Ahora solo me falta agrupar por datos y sumarlos, armando un query de mysql

    Respuesta
  • el Dic 15, 2016 a las 3:50 pm
    Permalink

    Hola Iván excelente aporte ahora como hago para tomar dos lineas en un mismo grafico osea necesito otra linea con otros valores dentro del mismo grafico

    Respuesta

Deja un comentario

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