2

Buenas tardes estoy iterando los registros de una base de datos en unas gráficas de charts.js. Cojo un campo creado que se llama fecha_contacto ya que es una base de datos de clientes de una empresa y pueden querer añadir clientes con una fecha de contacto diferente a la de created_at.

Lo gestiono del siguiente modo:

$result = [];
$fecha = new DateTime("now");
$fecha->modify('first day');
$fecha->modify('-11 months');
  for ($i = 0; $i < 12; $i++) {
   $result[$fecha->format('Y-M')] = 0;
     $fecha->modify('+1 month');
  }

$data = Cliente::select(DB::raw('count(*) as total, fecha_contacto'))->where('marca', 0)->whereIn('tipo_cliente', [0, 3])->groupBy('fecha_contacto')->get();

  foreach($data as $t) {
    $fechas = date('Y-M', strtotime($t->fecha_contacto));
    if (isset($result[$fechas]) === true) {
     $result[$fechas] += $t->total;
    } else {
     $result[$fechas] = $t->total;
   }
  }

return view('clientesPotenciales')->with(["result" => $result]);

Hasta día de hoy pensaba que funcionaba bien, pero hoy han insertado clientes que contactaron con ellos en el año 2017 y ahora me pone Enero de 2017 delante de Abril 2021 en las gráficas. Adjunto foto para que se vea más claro.

introducir la descripción de la imagen aquí

¿Qué estoy haciendo mal? En teoría, estoy sacando los registros de los últimos 12 meses ¿no?

Esto es lo que recibo por php a la vista: Relamente mando tres consultas distintas, pero pongo una sola ya que son iguales pero con distintos parametros.

array:13 [▼
  "2020-May" => 0
  "2020-Jun" => 22
  "2020-Jul" => 12
  "2020-Aug" => 14
  "2020-Sep" => 19
  "2020-Oct" => 15
  "2020-Nov" => 15
  "2020-Dec" => 4
  "2021-Jan" => 13
  "2021-Feb" => 9
  "2021-Mar" => 1
  "2021-Apr" => 2
  "2017-Jan" => 1
]

Como podeis ver me pone "2017-Jan" => 1 en última posición, no entiendo por que.

Luego en la vista:

<div class="card" style="padding-bottom: 0px;padding-top: 0px;">
   <canvas id="clientes"></canvas>
</div>

Y el JavaScript:

<script>
        var ctx = document.getElementById('clientes').getContext('2d');
        var clientes = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: {!! json_encode(array_keys($result)) !!},
            datasets: [{
                label: 'Depildiodo',
                data: {!! json_encode(array_values($result)) !!},
                backgroundColor: "rgb(85 51 255 / 48%)",
                borderColor: "#53f",
                borderWidth: 1,
                hoverBackgroundColor: "#53f",
                hoverBorderColor: "#53f",
                fill: false,
                pointBorderWidth: 1
            }]
        },
        plugins: [{
            beforeInit: function(chart, options) {
              chart.legend.afterFit = function() {
                this.height = this.height + 30;
              };
            }
        }],
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                yAxes: [
                    {
                    ticks: {
                        fontColor: "#adb0b5",
                        beginAtZero: true,
                        maxTicksLimit: 4,
                        padding: 20
                    },
                    gridLines: {
                        display: true,
                        color: "rgb(173 176 181 / 14%)"
                      }
                    }
                ],
                xAxes: [
                    {
                    ticks: {
                        padding: 20,
                        fontColor: "#adb0b5",
                    },
                    gridLines: {
                        display: true,
                        color: "rgb(173 176 181 / 14%)"
                        }
                    }
                ]
            },
            tooltips: {
                callbacks: {
                    labelColor: function(tooltipItem, chart) {
                        return {
                            borderColor: '#ccc',
                            backgroundColor: '#ccc'
                        };
                    },
                    labelTextColor: function(tooltipItem, chart) {
                        return '#fff';
                    }
                }
            },
            legend: {
                display: true,
                    
                labels: {
                    fontColor: '#a1aab2',
                    padding: 20,
                }
            }
            
        }
    });
  </script>
4
  • 1
    Hola @Trauma aumentare la pregunta con más información, no la crei necesaria por eso no la puse, gracias por la respuesta!, la etiqueto como char.js porque utilizo esa libreria, no consulto por ajax, consulto con php (Laravel) y luego el result lo implemento en el div id con el script de chart.js
    – Miguel
    Commented el 27 abr. 2021 a las 19:23
  • 1
    Creo que solo te falta filtrar las fechas correctamente. Supongo que hay que agregar algo como: ->whereBetween('fecha_contacto', array($fecha_inicio, $fecha_fin))
    – Triby
    Commented el 27 abr. 2021 a las 19:53
  • No entiendo bien @Triby , eso va en la query? de donde saco fecha_inicio y fecha_fin ?? Saludos
    – Miguel
    Commented el 27 abr. 2021 a las 19:56
  • Sí, va en la consulta; la fecha de inicio puedes tomarla después de $fecha->modify('-11 months'); y la fecha final con la fecha actual; por supuesto, solo necesitas aplicar los formatos adecuados para el tipo de columna.
    – Triby
    Commented el 27 abr. 2021 a las 20:05

1 respuesta 1

4
+50

Con el siguiente código solo creas un arreglo de fechas, pero realmente no estás filtrando la consulta.

$result = [];
$fecha = new DateTime("now");
$fecha->modify('first day');
$fecha->modify('-11 months');
  for ($i = 0; $i < 12; $i++) {
   $result[$fecha->format('Y-M')] = 0;
     $fecha->modify('+1 month');
  }

Dependiendo del tipo de dato de la columna fecha_contacto debes armar los valores para filtrar:

  • Formato para tipo date: Y-m-d,
  • Formato para tipo datetime: Y-m-d H:i:s

Para tipo date solo necesitas la fecha, se usa t para obtener el último día del mes, sin tener que modificar:

$fecha_inicio = (new DateTime('now'))->modify('first day')->modify('-11 months')->format('Y-m-d');
$fecha_fin = (new DateTime('now'))->format('Y-m-t');

Para tipo datetime debes considerar el primer momento del día para la fecha de inicio y el último para la fecha final:

$fecha_inicio = (new DateTime('now'))->modify('first day')->modify('-11 months')->format('Y-m-d') . ' 00:00:00';
$fecha_fin = (new DateTime('now'))->format('Y-m-t') . ' 23:59:59';

Luego agregas el filtro a la consulta con ->whereBetween():

$data = Cliente::select(DB::raw('count(*) as total, fecha_contacto'))
    ->where('marca', 0)
    ->whereIn('tipo_cliente', [0, 3])
    ->whereBetween('fecha_contacto', [$fecha_inicio, $fecha_fin])
    ->groupBy('fecha_contacto')->get();

  foreach($data as $t) {
    $fechas = date('Y-M', strtotime($t->fecha_contacto));
    if (isset($result[$fechas]) === true) {
       $result[$fechas] += $t->total;
    } else {
       // Esto no debería pasar, porque se creó el arreglo solo con las fechas a mostrar
       $result[$fechas] = $t->total;
   }
  }

return view('clientesPotenciales')->with(["result" => $result]);

No es estrictamente necesario, pero podrías ordenar los resultados por fecha.

9
  • @BetaM, tienes toda la razón, sin encerrar entre paréntesis genera error de sintaxis. Gracias por la corrección. En cuanto a Carbon, escapa de mis precarios conocimientos, pero investigaré para ver si puedo mejorar la respuesta.
    – Triby
    Commented el 27 abr. 2021 a las 20:35
  • Muchas gracias @Triby como siempre, a funcionado a la perfección, no sabia que tenia que hacer esto. Mil gracias!
    – Miguel
    Commented el 30 abr. 2021 a las 11:51
  • Una pregunta @Triby ?? puede ser que de este modo, no salga nada en la gráfica hasta que acaba el día??
    – Miguel
    Commented el 1 may. 2021 a las 17:36
  • Pues que antes de hacer está modificación que me pusiste, si añadia un cliente la gráfica lo mostraba en el momento, ahora hasta que no pasa el día completo desde que lo puse no lo muestra, eso es raro @Triby
    – Miguel
    Commented el 3 may. 2021 a las 16:00
  • Si solo estoy tomando en cuenta las fechas, las horas no. Por que muestro los meses solo en la gráfica @Triby
    – Miguel
    Commented el 3 may. 2021 a las 16:26

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.