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.

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.

<?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;

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