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

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

En Programador Novato vivimos de los anuncios, hemos detectado que está utilizando extensiones para bloquear anuncios. Ayudanos deshabilitando tu bloqueador de anuncios. :)