Portada » JQuery biblioteca de JavaScript » Como crear gráficos estadísticos con PHP, jQuery y xCharts

Como crear gráficos estadísticos con PHP, jQuery y xCharts

Como crear gráficos estadísticos con PHP, jQuery y xCharts. En esta publicación nos enfocaremos en la implementación de gráficos estadísticos para nuestros sistemas web. Sin embargo, los gráficos son una gran ayuda visual para tomar decisiones dentro de una organización que goza con el servicio de una plataforma web.
Si, eres desarrollador no podemos entregar sistemas sin el apartado de estadísticas y allí prima la implementación de estos fabulosos gráficos. Ahora, estos gráficos en algunos casos podrían convertirse en una tarea titánica y muy difícil de implementar. Sin embargo, usaremos unas librerías que nos facilitara las cosas: estamos hablando de «xCharts».

Como crear gráficos estadísticos con PHP, jQuery y xCharts

En este artículo, vamos a implementarlo junto con el selector de fechas junto a la librería Bootstrap, para construir gráficos de aspecto muy atractivo, usaremos AJAX para obtener datos de una tabla en MySQL.

Estructura de nuestro sistema

Archivo index.php

Este fichero es el principal donde  mostraremos el gráfico estadístico junto con la librería Bootstrap y un input para que el usuario pueda elegir un rango de fechas. Este rango será visible en el gráfico.

Crear gráficos dinámicos con jQuery y xCharts
Crear gráficos dinámicos con jQuery y xCharts

Fichero registro.php

Este archivo será el encargado de registrar las ventas y las fechas para poblar la tabla con registros que serán visibles en la página principal del gráfico.

Cargar datos para nuestros gráficos estadisticos
Cargar datos para nuestros gráficos estadisticos
<?php
require_once('setup.php');

	if(isset($_POST['btnguardar'])){
	$fecha=$_POST['fecha'];
	$venta=$_POST['venta'];

		//$sql2=$dbcon->query("insert into operacion(Ope_Fecha, Ope_Venta) values('$fecha','$venta')");

		$sales = ORM::for_table('operacion')->create();
		$sales->set('Ope_Fecha', $fecha );
 		$sales->set('Ope_Venta', $venta);
		$sales->save();
		
		if($sales){
			$ok= "Registrado correctamente";
		}else{
			$ok2= "Hubo un error al procesar recurso";
		}
	
}
	
?>

Una tabla llamada «php_columnas.sql»

Este fichero será la tabla donde almacenaremos nuestra información que posteriormente esta será visible en nuestro gráfico. Por lo tanto, este fichero consta de una tabla llamada «operacion» y además posee 3 columnas llamados «Ope_id», «Ope_Fecha», «Ope_Venta».

CREATE TABLE IF NOT EXISTS `operacion` (
`Ope_id` int(8) NOT NULL,
  `Ope_Fecha` date NOT NULL,
  `Ope_Venta` int(11) DEFAULT NULL
) ENGINE=InnoDB AUTO_INCREMENT=17 DEFAULT CHARSET=latin1;

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

INSERT INTO `operacion` (`Ope_id`, `Ope_Fecha`, `Ope_Venta`) VALUES
(1, '2018-05-18', 85),
(2, '2018-05-17', 25),
(3, '2018-05-16', 63),
(4, '2018-05-15', 15),
(5, '2018-05-14', 90),
(6, '2018-05-13', 70),
(7, '2018-05-12', 36),
(8, '2018-05-11', 45),
(9, '2018-05-10', 80),
(10, '2018-05-09', 50),
(11, '2018-05-08', 30),
(12, '2018-05-07', 60),
(13, '2018-05-06', 25),
(14, '2018-05-05', 15),
(15, '2018-05-21', 45),
(16, '2018-05-22', 65);

--
-- Índices para tablas volcadas
--

--
-- Indices de la tabla `operacion`
--
ALTER TABLE `operacion`
 ADD PRIMARY KEY (`Ope_id`);

--
-- AUTO_INCREMENT de las tablas volcadas
--

--
-- AUTO_INCREMENT de la tabla `operacion`
--
ALTER TABLE `operacion`
MODIFY `Ope_id` int(8) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=17;

 

Como crear gráficos estadísticos con PHP, jQuery y xCharts
Como crear gráficos estadísticos con PHP, jQuery y xCharts

CONCLUSIÓN

Para culminar la explicación de este artículo solo les comentare que la implementación de estos gráficos es muy imprescindible para nuestros sistemas web.

Podemos utilizar diversas librerías a gusto del programador. Sin embargo, les proporcionare este modelo de gráficos para sus sistemas. Además, lo dejare para que lo descarguen.

DESCARGA

Descargar Código Fuente

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 0 / 5. Recuento de votos: 0

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

1 comentario en “Como crear gráficos estadísticos con PHP, jQuery y xCharts”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.
Privacidad