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.
¿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>
char.js
porque utilizo esa libreria, no consulto por ajax, consulto con php (Laravel) y luego elresult
lo implemento en eldiv id
con el script de chart.js->whereBetween('fecha_contacto', array($fecha_inicio, $fecha_fin))
fecha_inicio
yfecha_fin
?? Saludos$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.