Generar gráficas por PHP y consultas a MySQL con Highcharts (Tutorial/Código Fuente)
Hola amigos, en este tutorial/aporte les enseñaré a mostrar gráficos bien bonitos a nuestras consultas MySQL con PHP; utilizando la librería Highcharts que está esrcrita en Javascript y HTML5.
Lo primero que debes hacer es descargarte la librería desde su página web: http://www.highcharts.com/download, para interactuar con ella es bastante sencillo ya que ella viene configurada para que solo eligamos que tipo de gráfico mostrar (por default vienen los de barras) y pasar en un array la información que vamos a generar con php.
Éste ejemplo consta de la librería ya mencionada, una hoja de estilos, el archivo conexion.php y el archivo estadisticas.php que es donde nos conectamos a la base de datos y realizamos la consulta generando una tabla y su posterior gráfico, vamos a ver el código del archivo.
ESTADISTICAS.PHP
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Estadístias PHP - JS</title>
<link rel="stylesheet" href="estilo.css" />
<script src="js/jquery.min.js"></script>
<script src="js/highcharts/js/highcharts.js"></script>
<script src="js/highcharts/js/themes/grid.js"></script>
<script src="js/highcharts/js/modules/exporting.js"></script>
</head>
<body>
<div class="contenedor">
<div id="consulta"><h1>Gráficas PHP y MySQL con Higchatrs - http://www.genesisvargasj.com></h1><hr>
<table>
<thead>
<tr>
vth>Semestres</th>
<th>Cantidad</th>
<th>Porcentaje</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<?php
include("conexion.php");
$query = "SELECT s.Semestre, COUNT(e.IdSemestre) as total FROM Estudiante e, Semestre s WHERE e.IdSemestre = s.IdSemestre GROUP BY e.IdSemestre";
$result = mysqli_query($con, $query);
$c=0;
$a=0;
$total=0;
while($row = mysqli_fetch_array($result, MYSQLI_ASSOC))
{
$categoria[$c] = $row["Semestre"];
$datos[$c] = $row["total"];
$total = $total + $row["total"];
$c++;
}
for ($j=0;$j<=$c-1;$j++)
{
$a++;
echo "<tr><td>".$categoria[$j];
echo "</td>".$datos[$j];
echo "</td>".number_format((($datos[$j]/$total)*100), 1, ",", "")."%";
$por[$j]= round( ($datos[$j]/$total)*100, 1);
if ($j==0)
{
echo "</td><td rowspan=".$c.">".$total."</td></tr>";
}
}
mysqli_close($con);
?>
</tbody>
</table>
</div>
<script>
$(function () {
var colors = Highcharts.getOptions().colors,
categories = [<?php for($y=0; $y<=$c-1; $y++){ echo """.$categoria[$y]."",";}?> ],
name = "Semestres",
data = [
<?php for($x=0;$x<=$c-1;$x++){ ?>
{
y: <?php echo $por[$x]; ?>,
color: colors[<?php echo $x; ?>],
},
<?php } ?>
];
function setChart(name, categories, data, color) {
chart.xAxis[0].setCategories(categories, false);
chart.series[0].remove(false);
chart.addSeries({
name: name,
data: data,
color: color || "white"
}, false);
chart.redraw();
}
var chart = $("#grafica").highcharts({
chart: {
type: "column"
},
title: {
text: "Porcentajes de Estudiantes"
},
xAxis: {
categories: categories
},
credits: {
enabled: false
},
plotOptions: {
column: {
cursor: "pointer",
point: {
events: {
click: function() {
var drilldown = this.drilldown;
if (drilldown) {
setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
} else {
setChart(name, categories, data);
}
}
}
},
dataLabels: {
enabled: true,
color: colors[0],
style: {
fontWeight: "bold"
},
formatter: function() {
return this.y +" %";
},
}
}
},
series: [{
name: name,
data: data,
color: "white"
}],
exporting: {
enabled: true
}
})
.highcharts();
});
</script>
<div id="grafica"></div>
</div>
</body>
</html>
Aquí incuimos nuestro archivo de conexión y realizamos la consulta: guardamos los valores de cada campo en un vector para luego recorrerlos con un for, sacarle el porcentaje y luego usarlos en el gráfico. En la parte de highcarts lo clave es la información que metamos en los arrays: data y categories; éstas son dinámicas y las generamos con php anteriormente guardándolas en un vector por eso es necesario recorrelo con un para e imprimirlo con un "echo".
CONEXION.PHP
<?php
$con = new mysqli("localhost", "root", "123", "Ejemplo");
if ($con->connect_errno)
{
echo "Fallo al contenctar a MySQL: (" . $con->connect_errno . ") " . $con->connect_error;
exit();
}
@mysqli_query($con, "SET NAMES "utf8"");
?>
Éste es el archivo donde tenemos la conexion a nuestra base de datos, en este caso mi servidor es localhost, mi usuario es root, mi contraseña es 123 y la base de datos que voy a utilizar se llama Ejemplo.
ESTILO.CSS
body {
background: #f2f2f2;
color: #111;
font-family: sans-serif;
font-size: 14px;
}
.contenedor {
width: 980px;
margin: 0 auto;
padding: 2em;
}
#grafica, #consulta {
padding: 18px 20px;
text-align:center;
}
.form {
text-align: center;
margin: 0 auto;
max-width: 320px;
}
table {
cursor: pointer;
padding:8px;
width: 100%;
}
th {
background: rgb(66, 159, 202);
border-color: rgb(66, 159, 202);
}
tr, td {
border: 1px solid rgb(66, 159, 202);
border-radius: 5px;
}
Y por último este es nuestro archivo de hoja de estilos donde le damos una mejor apariencia a nuestra página php.
Si hacemos el ejercicio debería quedarnos así:
Bueno eso es todo espero que les sirva mucho para aprender y practicar. Les dejo una carpeta comprimida para que descarguen el ejemplo y también un demo para que lo vean en funcionamiento.
Comentarios
Soy Genesis Vargas Jiménez, autor de éste blog. Me gusta desarrollar software en todas las plataformas (web, móvil y desktop) y compartir conocimiento para ayudar a muchas personas.
Desde el 2015 soy MVP Microsoft en Visual Studio y tecnologías de desarrollo, reconocimiento que me enorgullece mucho.
MVP Microsoft
