Genesis Vargas J

Generar gráficas por PHP y consultas a MySQL con Highcharts (Tutorial/Código Fuente)

Comparte:

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.

DEMO

Comentarios


genesis vargas

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 Genesis Vargas J

A PHP Error was encountered

Severity: Core Warning

Message: Module 'timezonedb' already loaded

Filename: Unknown

Line Number: 0

Backtrace: