Grafico de barras

Para la creación del gráfico que nos mostrará las ventas de cada día del mes corriente, en el ejemplo que estoy compartiendo, el primer paso es crear un procedimiento compartido, donde capturaremos las ventas de cada día del mes corriente. Es decir, del mes en el que estamos trabajando.

           BEGIN
    SELECT
        DATE(vc.fechaVenta) AS fechaVenta,
        SUM(ROUND(vc.totalVenta, 2)) AS totalVenta
    FROM
        venta_cabecera vc
    WHERE
        DATE(vc.fechaVenta) >= DATE_FORMAT(NOW() - INTERVAL 1 MONTH, '%Y-%m-01')
        AND DATE(vc.fechaVenta) <= LAST_DAY(CURRENT_DATE)
    GROUP BY
        DATE(vc.fechaVenta);
END
          

...

El siguiente paso es enviar una solicitud Ajax y recibir como respuesta los datos del procedimiento. Con esos datos, crearemos en un lienzo (canvas) el gráfico relativo a esa información.

Pongo el codigo completo del ejemplo, pero abajo lo voy a explicar

               $.ajax({
        type: "POST",
        url: "ajax/dashboard.php",
        data: {
            'accion': 1, // obtener las ventas del mes
        },
        dataType: "json",
        success: function(response) {
            // Puedes realizar acciones con la respuesta aquí
            console.log(response);

            var fechaVenta = [];
            var totalVenta = [];
            var TotalVentaMes = 0;

            // Recorremos el array response con un bucle for
            for (var i = 0; i < response.length; i++) {
                // Almacenamos los valores en los arrays correspondientes
                fechaVenta.push(response[i]
                    .fechaVenta
                ); // Asumiendo que hay una propiedad fechaVenta en el objeto de response
                totalVenta.push(response[i]
                    .totalVenta
                ); // Asumiendo que hay una propiedad totalVenta en el objeto de response
                TotalVentaMes = parseFloat(TotalVentaMes) + parseFloat(response[i]
                    .totalVenta); // Corregido esta línea
            }

            $('.card-title').html('<h2>Total Ventas del Mes: ' + TotalVentaMes.toFixed(2) +
                ' €</h2>');

            var ctx = $('#barChart').get(0).getContext('2d');
            var data = {
                labels: fechaVenta,
                datasets: [{
                    label: 'Total de Ventas',
                    data: totalVenta,
                    backgroundColor: 'rgba(255, 127, 80, 0.2)', // Color de fondo de las barras
                    borderColor: 'rgba(75, 192, 192, 1)', // Color del borde de las barras
                    borderWidth: 1 // Ancho del borde de las barras
                }]
            };

            var options = {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            };

            var barChart = new Chart(ctx, {
                type: 'bar',
                data: data,
                options: options
            });
        }

    });
          

Vamos a desglosar el código paso a paso:

• $.ajax(): Se inicia una solicitud Ajax utilizando la función $.ajax() de jQuery.
• type: "POST": Se especifica que la solicitud es de tipo POST.
• url: "ajax/dashboard.php": La URL a la cual se enviará la solicitud.
• data: { 'accion': 1 }: Los datos que se enviarán al servidor. En este caso, se envía un objeto con la propiedad 'accion' establecida en 1, lo que probablemente indica la acción que el servidor debe realizar.
• dataType: "json": Se especifica que se espera recibir datos en formato JSON como respuesta.
• success: function(response) {...}: La función que se ejecutará si la solicitud Ajax es exitosa. La respuesta del servidor se almacena en el parámetro response.
  • Manipulación de Datos de Respuesta:
    • Se crean arrays (fechaVenta y totalVenta) para almacenar los datos de fecha y total de venta provenientes de la respuesta.
    • Se utiliza un bucle for para recorrer el array de respuesta y llenar los arrays correspondientes.
    • Se calcula el TotalVentaMes sumando los valores de totalVenta.
  • Actualización de Elemento HTML: Se actualiza el contenido de un elemento HTML con la clase card-title con el total de ventas del mes.
  • Configuración y Creación del Gráfico:
    • Se utiliza la biblioteca Chart.js para crear un gráfico de barras.
    • Se configuran las etiquetas (labels), los datos (datasets), y opciones adicionales del gráfico.
    • Se crea una instancia de Chart para el elemento con el ID barChart utilizando el contexto (ctx), los datos y las opciones previamente definidos.

En resumen, este código realiza una solicitud al servidor para obtener datos de ventas del mes, procesa la respuesta para calcular el total de ventas y luego utiliza Chart.js para crear un gráfico de barras con los datos recibidos.

---

Ir al indice

---