Crear Grafica de barra y lineas con Chartjs, PHP y MySQL

Vamos a crear una grafica de barra usando la libreria ChartJs, PHP y MySQL.

Vamos a partir de el ejemplo anterior donde creamos una grafica de barra y lineas con chartjs.

Base de datos

Usaremos una base de datos con una sola tabla que contendra las fecha de venta y valores.

create database chartjs10;
use chartjs10;

create table venta(
	id int not null auto_increment primary key,
	date_at date,
	val double
);

insert into venta(date_at,val) value ("2019-01-01",100);
insert into venta(date_at,val) value ("2019-01-02",80);
insert into venta(date_at,val) value ("2019-01-03",205);
insert into venta(date_at,val) value ("2019-01-04",323);
insert into venta(date_at,val) value ("2019-01-05",110);
insert into venta(date_at,val) value ("2019-01-06",40);
insert into venta(date_at,val) value ("2019-01-07",80);
insert into venta(date_at,val) value ("2019-01-08",220);
insert into venta(date_at,val) value ("2019-01-09",95);
insert into venta(date_at,val) value ("2019-01-10",120);
insert into venta(date_at,val) value ("2019-01-11",249);
insert into venta(date_at,val) value ("2019-01-12",157);
insert into venta(date_at,val) value ("2019-01-13",199);
insert into venta(date_at,val) value ("2019-01-14",30);
insert into venta(date_at,val) value ("2019-01-15",290);

Agregamos 15 registros iniciales.

Para instalar la base de datos tenemos que seguir los siguientes pasos:

• Iniciar el xampp, apache y mysql
• Abrir una terminal de windows cmd.exe
• Ir al la ruta del mysql: cd \xampp\mysql
• Iniciar sesion en mysql: mysql -uroot
• Copiar el codigo SQl y pegarlo en la terminal o guardar el sql en un archivo y despues importar.

Codigo

Ahora vamos a empezar el codigo.

Lo primero que haremos sera obtener los registros de la base de datos y guardarlos en un array usando PHP.

$con = new mysqli("localhost","root","","chartjs10"); // Conectar a la BD
$sql = "select * from venta"; // Consulta SQL
$query = $con->query($sql); // Ejecutar la consulta SQL
$data = array(); // Array donde vamos a guardar los datos
while($r = $query->fetch_object()){ // Recorrer los resultados de Ejecutar la consulta SQL
    $data[]=$r; // Guardar los resultados en la variable $data
}

Con esto vamos a tener los resultados en una variable $data que mas adelante usaremos para crear la grafica.

Importar la libreria chart.min.js

<script src="chart.min.js"></script>

Crear un canvas contenedor para la grafica.

<canvas id="chart1" style="width:100%;" height="100"></canvas>

A continuacion el script para crear la grafica, es muy similar al ejemplo anterior, solo que ahora los datos los vamos a obtener recorriendo los resultados de la variable $data.

var ctx = document.getElementById("chart1");
var data = {
        labels: [ 
        <?php foreach($data as $d):?>
        "<?php echo $d->date_at?>", 
        <?php endforeach; ?>
        ],
        datasets: [{
            label: '$ Ventas',
            data: [
        <?php foreach($data as $d):?>
        <?php echo $d->val;?>, 
        <?php endforeach; ?>
            ],
            backgroundColor: "#3898db",
            borderColor: "#9b59b6",
            borderWidth: 2
        }]
    };
var options = {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    };
var chart1 = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: options
});

Voy a explicar la parte mas importante.

En las lineas 4,5 y 6 del script anterior se hace un recorrido de las etiquetas para la grafica, es decir las fechas, que usan el campo date_at. Estos valores deben ir dentro de comillas.

En las lineas 11,12 y 13 del script anterior se hace un recorrido de los valores para la grafica, los valores usan el campo val, estos valores no van necesariamente en comillas.

Recordamos que usamos la variable data por que los datos de las fechas y los valores correspondan unos con otros.

En la linea 30 es posible alternar entre los valores “bar” y “line” para obtener una grafica de barra o linea, respectivamente.

El resto de parametros ya lo explicamos en el ejemplo anterior.

Resultado

Descargar

Les dejo el link de descarga del ejemplo:

Link: Descargar Ejemplo

Finalizando

Modificando un poco el script puedes adaptarlo a tu propio sistema o base de datos. Tambien puedes modificar otros parametros como los colores, etc.

Espero este ejemplo te sirva, por fa si te sirvio dejanos un comentario 😉