Graficar la prediccion de ventas de nuestro ecommerce en PHP
Programador Novato > [Curso] crear un Ecommerce con PHP 🐘 y MySQL 🐬 > 39.-Graficar la prediccion de ventas de nuestro ecommerce en PHP

39.-Graficar la prediccion de ventas de nuestro ecommerce en PHP

En este tutorial vamos a graficar la prediccion de ventas de nuestro ecommerce en PHP y esto lo lograremos creando la clase regresionLineal que desarrollamos en el tutorial anterior.

Graficar la prediccion de ventas de nuestro ecommerce en PHP

Codigo: https://github.com/programadornovato/ecommerce/commit/34da4fbbac6cc1bc3ea814fd9e03dfe4bd30034d

admin/dist/js/pages/dashboard.js

/*
 * Author: Abdullah A Almsaeed
 * Date: 4 Jan 2014
 * Description:
 *      This is a demo file used only for the main dashboard (index.html)
 **/

$(function () {

  'use strict'

  // Make the dashboard widgets sortable Using jquery UI
  $('.connectedSortable').sortable({
    placeholder         : 'sort-highlight',
    connectWith         : '.connectedSortable',
    handle              : '.card-header, .nav-tabs',
    forcePlaceholderSize: true,
    zIndex              : 999999
  })
  $('.connectedSortable .card-header, .connectedSortable .nav-tabs-custom').css('cursor', 'move')


  /* Chart.js Charts */
  // Sales chart
  var salesChartCanvas = document.getElementById('revenue-chart-canvas').getContext('2d');
  //$('#revenue-chart').get(0).getContext('2d');

  var salesChartData = {
    labels  : labelVentas,
    datasets: [
      {
        label               : '$ por dia',
        data                : datosVentas
      },
      {
        label               : '$ prediccion por dia',
        borderColor         : 'rgba(255, 0, 0, 1)',
        data                : datosPrediccion
      }
    ]
  }

  var salesChartOptions = {
    maintainAspectRatio : false,
    responsive : true,
    legend: {
      display: true
    },
    scales: {
      xAxes: [{
        gridLines : {
          display : true,
        }
      }],
      yAxes: [{
        gridLines : {
          display : true,
        }
      }]
    }
  }

  // This will get the first returned node in the jQuery collection.
  var salesChart = new Chart(salesChartCanvas, { 
      type: 'line', 
      data: salesChartData, 
      options: salesChartOptions
    }
  )

})

admin/estadisticas.php

<?php
include_once "db_ecommerce.php";
include_once "regresionLineal.php";
$con = mysqli_connect($host, $user, $pass, $db);

$queryNumVentas="SELECT COUNT(id) AS num from ventas 
where fecha BETWEEN DATE( DATE_SUB(NOW(),INTERVAL 7 DAY) ) AND NOW(); ";
$resNumVentas=mysqli_query($con,$queryNumVentas);
$rowNumVentas=mysqli_fetch_assoc($resNumVentas);

$queryNumClientes="SELECT COUNT(id) AS num from clientes; ";
$resNumClientes=mysqli_query($con,$queryNumClientes);
$rowNumClientes=mysqli_fetch_assoc($resNumClientes);

$queryVentasDia="SELECT
sum(detalleVentas.subTotal) as total,
ventas.fecha
FROM
ventas
INNER JOIN detalleVentas ON detalleVentas.idVenta = ventas.id
GROUP BY DAY(ventas.fecha);";
$resVentasDia=mysqli_query($con,$queryVentasDia);
$labelVentas="";
$datosVentas="";

$x=array();
$y=array();
$dia=1;
while($rowVentasDia=mysqli_fetch_assoc($resVentasDia)){
  $labelVentas=$labelVentas."'". date_format(date_create($rowVentasDia['fecha']),"Y-m-d")."',";
  $datosVentas=$datosVentas.$rowVentasDia['total'].",";
  array_push($x,$dia);
  array_push($y,$rowVentasDia['total']);
  $dia++;
}
$ia=new IAphp();
$prediccionVentas=$ia->regresionLineal($x,$y);
$w=$prediccionVentas['w'];
$b=$prediccionVentas['b'];
$datosPrediccion="";
for ($i=0; $i < count($x)+2; $i++) { 
  $venta=$w*($i+1)+$b;
  $datosPrediccion=$datosPrediccion."'".$venta."',";
}
//echo $datosPrediccion;
$datosPrediccion=rtrim($datosPrediccion,",");
$labelVentas=rtrim($labelVentas,",");
$datosVentas=rtrim($datosVentas,",");

?>    
<script>
  var labelVentas=[<?php echo $labelVentas; ?>,'2020-02-01','2020-02-02'];
  var datosVentas=[<?php echo $datosVentas; ?>];
  var datosPrediccion=[<?php echo $datosPrediccion; ?>];
</script>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
      <!-- Content Header (Page header) -->
      <div class="content-header">
        <div class="container-fluid">
          <div class="row mb-2">
            <div class="col-sm-6">
              <h1 class="m-0 text-dark">Dashboard</h1>
            </div><!-- /.col -->
          </div><!-- /.row -->
        </div><!-- /.container-fluid -->
      </div>
      <!-- /.content-header -->

      <!-- Main content -->
      <section class="content">
        <div class="container-fluid">
          <!-- Small boxes (Stat box) -->
          <div class="row">
            <div class="col-6">
              <!-- small box -->
              <div class="small-box bg-info">
                <div class="inner">
                  <h3><?php echo $rowNumVentas['num']; ?></h3>
                  <p>Ventas en los ultimos 7 dias</p>
                </div>
                <div class="icon">
                  <i class="ion ion-bag"></i>
                </div>
                <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
              </div>
            </div>
            <!-- ./col -->
            <div class="col-6">
              <!-- small box -->
              <div class="small-box bg-warning">
                <div class="inner">
                  <h3><?php echo $rowNumClientes['num'] ?></h3>
                  <p>Clientes</p>
                </div>
                <div class="icon">
                  <i class="ion ion-person-add"></i>
                </div>
                <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
              </div>
            </div>
            <!-- ./col -->
          </div>
          <!-- /.row -->
          <!-- Main row -->
          <div class="row">
            <!-- Left col -->
            <section class="col-12 connectedSortable">
              <!-- Custom tabs (Charts with tabs)-->
              <div class="card">
                <div class="card-header">
                  <h3 class="card-title">
                    <i class="fas fa-chart-pie mr-1"></i>
                    Ventas por dia
                  </h3>
                </div><!-- /.card-header -->
                <div class="card-body">
                  <div class="tab-content p-0">
                    <!-- Morris chart - Sales -->
                    <div class="chart tab-pane active" id="revenue-chart" style="position: relative; height: 300px;">
                      <canvas id="revenue-chart-canvas" height="300" style="height: 300px;"></canvas>
                    </div>
                    <div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;">
                      <canvas id="sales-chart-canvas" height="300" style="height: 300px;"></canvas>
                    </div>
                  </div>
                </div><!-- /.card-body -->
              </div>
              <!-- /.card -->


            </section>
            <!-- /.Left col -->
          </div>
          <!-- /.row (main row) -->
        </div><!-- /.container-fluid -->
      </section>
      <!-- /.content -->
    </div>

admin/regresionLineal.php

<?php
class IAphp
{
    function regresionLineal($x, $y)
    {
        $n = count($x);
        if (count($y) != $n) {
            die("Los elementos en x no coinciden con los elementos en y");
        }
        $sumaX = array_sum($x);
        $sumaY = array_sum($y);

        $sumaXporX = 0;
        $sumaXporY = 0;

        for ($i = 0; $i < $n; $i++) {
            $sumaXporX = $sumaXporX + ($x[$i] * $x[$i]);
            $sumaXporY = $sumaXporY + ($x[$i] * $y[$i]);
        }
        $w = (($n * $sumaXporY) - ($sumaX * $sumaY)) / (($n * $sumaXporX) - ($sumaX * $sumaX));
        $b = ($sumaY - ($w * $sumaX)) / $n;
        //echo "w=$w <br>b=$b";
        return array("w"=>$w,"b"=>$b);
    }
}

🔗 Excel del ejemplo https://www.dropbox.com/s/h77pbpsrq2ydvu2/ventas-IA.xlsx?dl=0
🔗 Ejercicio que explica como reducir la perdida: https://developers.google.com/machine-learning/crash-course/fitter/graph?hl=es-419

🎦Chart.js Tutorial [En español con código de ejemplo] 📊: https://youtu.be/_vRS87AT1Yk

🎦Curso de PHP🐘 y MySql🐬: https://www.youtube.com/playlist?list=PLCTD_CpMeEKS2Dvb-WNrAuDAXObB8GzJ0
🎦[Curso] Laravel Tutorial en Español: https://www.youtube.com/playlist?list=PLCTD_CpMeEKQcVcM4u4qddLYRE37S_0XS
🎦Curso]Ajax con Jquery de 0 a 100 🌇: https://www.youtube.com/watch?v=52yI0xiB73A&list=PLCTD_CpMeEKSYJ1J15M8PknOMwOpeqsXz
🎦Mysql configurar una replicación maestro – esclavo 🐬: https://www.youtube.com/watch?v=RY-EdBOJWEs
🎦[Curso] Visual Studio Code 🆚 de 0 a 100: https://www.youtube.com/playlist?list=PLCTD_CpMeEKQbdlT8efsS-veXuvYZ1UWn
🎦[Curso] Bootstrap de 0 a 100 🌈: https://www.youtube.com/playlist?list=PLCTD_CpMeEKSVmsZJIumVvfDviuW-c9AT
🎦[Curso] HTML y CSS de 0 a 100 🌐: https://www.youtube.com/playlist?list=PLCTD_CpMeEKS1SmufBGPOV1mjNfCiLwek

🎦 Esta lista de reproducción: https://www.youtube.com/playlist?list=PLCTD_CpMeEKQhRiJx7Wv3pM3rYvT9_CS9 .
Codigos en gdrive: https://drive.google.com/file/d/1QW8ExkL8eS7nQ5HTDvUuSkkGJMSmecGV/view?usp=sharing
Gracias por apoyar este canal: https://www.patreon.com/programadornovato?fan_landing=true

🔗 Facebook: https://facebook.com/ProgramadorNovatoOficial
🔗 Twitter: https://twitter.com/programadornova
🔗 Linkedin: https://www.linkedin.com/in/programadornovato/
🔗 Instagram: https://www.instagram.com/programadornovato/

<<Anterior tutorial Siguiente tutorial >>

Deja un comentario

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

Salir de la versión móvil