▷ Como Hacer【 REPORTES ESTADISTICOS 】Con PHP y MySql

echo “Hoy aprenderemos a crear Reportes estadisticos con PHP y Mysql de una forma fácil”

reportes estadísticos con php y mysql

Indice del Artículo

¿En que consisten los Reportes estadisticos con PHP y Mysql?

En este formulario crearemos 4 tipo de Gráficos para nuestros reportes estadísticos que nos podrán servir para todas nuestras presentaciones, tareas y sistemas web gracias a la Librería HighCharts que te mostraré a continuación usando HTML, PHP Y MYSQL. Las imagenes de ejemplo se encuentran abajo de cada código mostrado en este Post para que te puedas dar una idea. También puedes observar los ejemplos en el video tutorial que se encuentra en nuestro canal de Youtube y en la parte superior de este Post.

¿Que es Highcharts?

Es una biblioteca para gráficos escritos en Javascript. No necesitas autorización de los autores para el uso de la librería en tus proyectos personales y sin fines de lucro.

Tener en cuenta:

El peor error que puedes cometer para que un gráfico no sea visualizado en tu web es la manera en que colocas las rutas, es un error típico así que cuidado donde pones la carpeta de la librería para luego ser llamado en tu index o en tu archivo donde quieras utilizarlo.

Hola, hoy te ayudaré a como crear gráficas estadísticos en tiempo real con php. Para empezar necesitaremos la librería Highcharts que podrás descargar gratis al final de este Post. La librería Highcharts tiene un contenido con mas de 40 cuadros estadísticos, para que puedas escoger y realizar en tu proyecto.

Para el ejemplo crearemos una Base de Datos con el nombre «reportes_graficos_db» que dentro tiene una tabla llamada «deudas» con 12 registros y sus columnas son:

cod_deuda
nom_deudor
ape_deudor
monto_deudor

A continuación la base de datos del ejemplo para que puedas utilizarlo en tu mysql:

reportes_graficos_db

-- Base de datos: `reportes_graficos_db`
--
CREATE DATABASE IF NOT EXISTS `reportes_graficos_db` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `reportes_graficos_db`;

-- --------------------------------------------------------

--
-- Estructura de tabla para la tabla `deudas`
--

CREATE TABLE IF NOT EXISTS `deudas` (
  `cod_deuda` int(11) NOT NULL AUTO_INCREMENT,
  `nom_deudor` varchar(20) NOT NULL,
  `ape_deudor` varchar(20) NOT NULL,
  `monto_deudor` int(11) NOT NULL,
  PRIMARY KEY (`cod_deuda`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=13 ;

--
-- Volcado de datos para la tabla `deudas`
--

INSERT INTO `deudas` (`cod_deuda`, `nom_deudor`, `ape_deudor`, `monto_deudor`) VALUES
(1, 'juan cristian', 'montano', 300),
(2, 'andrea', 'Perez bustamante', 400),
(3, 'juan', 'morales', 200),
(4, 'Nesyi ', 'Daniela', 100),
(5, 'Limbert', 'Soliz', 500),
(6, 'Crisalida', 'Herrera', 560),
(7, 'Luiz Eduardo', 'Pizarro', 1000),
(8, 'Betty', 'Toribio', 670),
(9, 'jose', 'ramirez Hurtado', 590),
(10, 'Cristina', 'zapatero', 760),
(11, 'Oscar', 'cholico', 130),
(12, 'Iveth Marcela', 'Galeano', 1400);

Crearemos una carpeta llamada reportes_graficos dentro de tu localhost, ahí descomprimiremos el Highcharts.

Ahora nos dirigiremos a nuestro IDE favorito para buscar la carpeta reportes_graficos donde crearemos nuestro archivo index.php y luego buscaremos el primer ejemplo del tutorial que es PIE CHART. Pero antes crearemos una conexión con nuestra base de datos.

conexion/conexion.php

<?php

   mysql_connect("Localhost","root","");
   mysql_select_db("reportes_graficos_db");

?>

Empezamos con el Primer Ejemplo, Uno de los cuadros más populares

Ejemplo 1: PIE CHART

<?php

require_once("conexion/conexion.php");

?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript">$(function () {
    $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: 'PERSONAS QUE DEBEN, 2015'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Deudores',
            data: [
<?php
$sql=mysql_query("select * from deudas");
while($res=mysql_fetch_array($sql)){
?>
                ['<?php echo $res['nom_deudor']; ?>', <?php echo $res['monto_deudor'] ?>],
<?php
}
?>

            ]
        }]
    });
});</script> </head>
<body data-rsssl=1> <script src="Highcharts-4.1.5/js/highcharts.js"></script> <script src="Highcharts-4.1.5/js/modules/exporting.js"></script> <div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
<br><br>
<center><a href="ejemplo2.php">Ver ejemplo 2</a></center>

</body>
</html>

Ejemplo 2: PYRAMIDE

<?php

require_once("conexion/conexion.php");

?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript">$(function () {

    $('#container').highcharts({
        chart: {
            type: 'pyramid',
            marginRight: 200
        },
        title: {
            text: 'Sales pyramid',
            x: -50
        },
        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b> ({point.y:,.0f})',
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
                    softConnector: true
                }
            }
        },
        legend: {
            enabled: false
        },
        series: [{
            name: 'Unique users',
            data: [
<?php
$sql=mysql_query("select * from deudas order by monto_deudor desc");
while($res=mysql_fetch_array($sql)){
?>
['<?php echo $res['nom_deudor'].' '.$res['ape_deudor'] ?>', <?php echo $res['monto_deudor'] ?> ],

<?php
}
?>

            ]
        }]
    });
});</script> </head>
<body data-rsssl=1> <script src="Highcharts-4.1.5/js/highcharts.js"></script> <script src="Highcharts-4.1.5/js/modules/funnel.js"></script> <script src="Highcharts-4.1.5/js/modules/exporting.js"></script> <div id="container" style="min-width: 410px; max-width: 600px; height: 400px; margin: 0 auto"></div>
<br><br>
<center><a href="ejemplo3.php">Ver ejemplo 3</a></center>
</body>
</html>

Ejemplo 3: BASIC BAR

<?php
 
      require_once("conexion/conexion.php");

?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript">$(function () {
    $('#container').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Historic World Population by Region'
        },
        subtitle: {
            text: 'Source: Wikipedia.org'
        },
        xAxis: {
            categories: [
<?php
$sql=mysql_query("select * from deudas order by monto_deudor desc");
while($res=mysql_fetch_array($sql)){
?>
['<?php echo $res['nom_deudor'] ?>'],
<?php
}
?>
],
            title: {
                text: null
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Population (millions)',
                align: 'high'
            },
            labels: {
                overflow: 'justify'
            }
        },
        tooltip: {
            valueSuffix: ' millions'
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                }
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -40,
            y: 100,
            floating: true,
            borderWidth: 1,
            backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
            shadow: true
        },
        credits: {
            enabled: false
        },
        series: [{
            name: 'Year 1800',
            data: [
<?php
$sql=mysql_query("select * from deudas order by monto_deudor desc");
while($res=mysql_fetch_array($sql)){
?>
[<?php echo $res['monto_deudor'] ?>],
<?php
}
?>
]
        }]
    });
});</script> </head>
<body data-rsssl=1> <script src="Highcharts-4.1.5/js/highcharts.js"></script> <script src="Highcharts-4.1.5/js/modules/exporting.js"></script> <div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
<br><br>
<center><a href="ejemplo4.php">Ver ejemplo 4</a></center>
</body>
</html>

reportes estadístico con basic bar Highcharts

Ejemplo 4: 3D COLUMN NULL VALUES

<?php
 
      require_once("conexion/conexion.php");

?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript">$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column',
            margin: 95,
            options3d: {
                enabled: true,
                alpha: 10,
                beta: 25,
                depth: 70
            }
        },
        title: {
            text: '3D chart with null values'
        },
        subtitle: {
            text: 'Notice the difference between a 0 value and a null point'
        },
        plotOptions: {
            column: {
                depth: 25
            }
        },
        xAxis: {
            categories: [
<?php
$sql=mysql_query("select * from deudas order by monto_deudor desc");
while($res=mysql_fetch_array($sql)){
?>
['<?php echo $res['nom_deudor']; ?>'],
<?php
}
?>
]
        },
        yAxis: {
            title: {
                text: null
            }
        },
        series: [{
            name: 'Sales',
            data: [
<?php
$sql=mysql_query("select * from deudas order by monto_deudor desc");
while($res=mysql_fetch_array($sql)){
?>
[<?php echo $res['monto_deudor'] ?>],
<?php
}
?>
]
        }]
    });
});</script> </head>
<body data-rsssl=1> <script src="Highcharts-4.1.5/js/highcharts.js"></script> <script src="Highcharts-4.1.5/js/highcharts-3d.js"></script> <script src="Highcharts-4.1.5/js/modules/exporting.js"></script> <div id="container" style="height: 400px"></div>
</body>
</html>

Así acaba este tutorial, puedes revisar todas las gráficas y usar la que más de adapte a tus necesidades, la librería Highcharts llegó para salvarnos la vida.

🚀 SUSCRIBETE y sumate a esta comunidad Programadora en mi canal de YouTube haciendo click Aquí.

Contenido Relacionado

SUBIR Y MOSTRAR IMAGENES CON PHP Y MYSQL
⭐⭐⭐⭐⭐ Crearemos un formulario que nos ayudara a subir y mostrar imagenes con PHP y MySql, Leer Más

COMO HACER REPORTES EN PHP PDF WORD Y EXCEL
⭐⭐⭐⭐⭐ Te enseñaré como hacer Reportes en PHP y MySql y exportarlo a PDF Word y Leer Más

COMO SUBIR ARCHIVOS CSV A MYSQL CON PHP
⭐⭐⭐⭐⭐ Aprenderemos como Subir Archivos CSV a MySql con PHP, Crearemos esta herramienta en un Formulario Leer Más

COMO HACER EFECTO LOADING con AJAX PHP Y MYSQL
⭐⭐⭐⭐⭐ Aprenderemos Hacer Efecto loading con ajax php y mysql en un formulario, Todo el Codigo Leer Más

REPORTES ESTADISTICOS CON PHP Y MYSQL